ITKeyword,专注技术干货聚合推荐

注册 | 登录

JS前端框架10 Extjs5 使用Tips

xundh 分享于 2015-07-16

推荐:前端开发者使用JS框架的三个等级

      目前前端开发者使用JS框架是种很普遍的现象,因为框架可以加快开发速度,同时避免各类浏览器的兼容性问题。不过同样是用框架开发,不同开发者的境界水平还

2019阿里云全部产品优惠券(新购或升级都可以使用,强烈推荐)
领取地址https://promotion.aliyun.com/ntms/yunparter/invite.html

本文不是教程,只是把最最常用的记在这里备查,就是一些代码段。

使用sencha cmd

1. 下载安装

https://www.sencha.com/products/extjs/cmd-download/
打开命令行输入:sencha 可以看到安装成功。
这里写图片描述
顺便下载一个ruby installer安装上。(安装时把加到path变量的钩钩上)。

2. 设置Extjs路径

下载Extjs GPL 5.1.0 并解压。命令行进入extjs的路径(也可以用参数-sdk 指定extjs路径),输入命令:

sencha generate app myweb ../myweb
生成的项目可以在chrome里测试。使用命令:

chrome --allow-file-access-from-files

这样在chrome执行可以跳过域限制。

这里写图片描述
也可以启动内置web服务器:命令行移到项目路径下:

sencha web start
也可以使用-port 指定端口

打包命令是:

sencha app build

其它命令

sencha generate model NewModel id:int,name:string,email:string
sencha generate controller NewController
sencha generate view NewViewName

app.json

默认页面

{
    ...

    "indexHtmlPath": "index.php"
}

选择器

query 选择dom

Ext.query("input[name=password]")[0].value  //获取input值
Ext.query("span");       //获取标签数组
Ext.query("span","parent_id");  //在parent_id的id标签里取span数组

get 返回Ext.dom.element对象

参数:id,Element,或dom对象

var el = Ext.get("my-div"); //参数是元素id
console.log(el.dom) ; //dom元素

fly 对于一次性使用的对象,可以用来替代get方法,以提升性能

系统中只维护一个fly结果,选择器改变时,前面定义过的fly变量指向也会跟着变化。

getCmp

获取Ext组件,参数是组件的id

getDom 获取dom节点

参数可以是id,dom节点对象,或Ext Element元素

select

返回可遍历的CompositeElement类型

Ext.select('a.BigClass').each(function(i){  
i.dom.href = 'javescript:void(0);'// 找到所有带有BigClass样式的A元素修改其链接 
});  

css选择器语法

(1)E:{display=none}:选择display值为none的元素E。其使用语法请看下面代码。
Ext.select('div:{display=none}'); //选择display值为none的元素E
(2)Ext.select('div:{display^=none}'); //选择display值以none开始的元素E
(3)Ext.select('div:{display$=none}'); //选择display值以none结尾的元素E
(4)Ext.select('div:{display*=none}'); //选择display值包含字符串none的元素E
(5)Ext.select('div:{display%=none}'); //选择display值整除2的元素E
(6)Ext.select('div:{display!=none}'); //选择display值不等于none的元素E

ajax

Ext.Ajax.request({     
       url:'url',  
       params:{  
        id:123  
        },  
        success: function(resp,opts) {   
                             var r = Ext.util.JSON.decode(resp.responseText);                                                   
                             console.log(r);
                     },   
                     failure: function(resp,opts) {   
                             var r = Ext.util.JSON.decode(resp.responseText);   
                             Ext.Msg.alert('错误', r.error);   
                      }     

      });

对话框

//confirm
Ext.MessageBox.confirm('提示', '请单击我 做出选择', callBack); 

//win
    Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';  
        var window = new Ext.Window({  
            //layout : 'fit',//设置window里面的布局 
            width:300,  
            height:200,  
            //关闭时执行隐藏命令,如果是close就不能再show出来了 
            closeAction:'hide',  
            //draggable : false, //不允许窗口拖放 
            //maximizable : true,//最大化 
            //minimizable : true,//最小话 
            //constrain : true,//防止窗口超出浏览器 
            //constrainHeader : true,//只保证窗口顶部不超出浏览器 
            //resizble : true,//是否可以改变大小 
            //resizHandles : true,//设置窗口拖放的方式 
            //modal : true,//屏蔽其他组件,自动生成一个半透明的div 
            //animateTarget : 'target',//弹出和缩回的效果 
            //plain : true,//对窗口进行美化,可以看到整体的边框 

            buttonAlign : 'center',//按钮的对齐方式 
            defaultButton : 0,//默认选择哪个按钮 
            listeners:{
                close:function(){
                    Ext.require('P.Rbac.Operations.Js.Module', function () {
                        P.Rbac.Operations.Js.Module.closeInTab();
                    });
                }
            },loader: {
                        url: _app_+'/Public/Rbac/Resource/Views/Add.htm',
                        autoLoad: true, scripts: true, listeners: {
                            load: function (obj, eOpts) {
                                $win=$(obj.target.body.dom);
                                if(id >0){
                                    $("form[name=fmAdd]",$win).fillForm({
                                        "url":_app_+'/Rbac/Resource/query/id/'+id,
                                        "after":function(){
                                            Ext.require('P.Rbac.Operations.Js.Module',function(){
                                                P.Rbac.Operations.Js.Module.inTab(obj.target.body,id);
                                            });

                                            $("input[name=btnAddOperation]",$win).click(function(){
                                                Ext.require('P.Rbac.Operations.Js.Module',function(){
                                                    P.Rbac.Operations.Js.Module.add(0,id);
                                                });
                                            });
                                        }
                                    });
                                }
                            }
                        }
                    },
            buttons : [{  
                text : '确定',  
                handler : function(){  
                    window.hide();  
                }  
            },{  
                text : '取消'  
            }]  
        });  
        window.show();  
        new Ext.Viewport({  
            items : [window]  
        });  

模板使用示例

    var tpl=Ext.XTemplate.from('RbacRoleViewsAdd',{compiled:true});
    tpl.overwrite('RbacRoleViewsAdd',{a:'abc',rows:P.Rbac.Resource.Js.Module.rows});
 <div id="RbacRoleViewsAdd">{a}
      <tpl for="rows">
        <div >{resource_name}</div>
      </tpl>
 </div>

使用类

1.基本定义方式:

Ext.define("person", {
    config:{  
            name:'小张',  
            age:20  
        },  
    //extend:'', 继承
    //alias 类的别名
    //alternateClassName 别名
    //requires:[], 引用其它类,预加载
    //uses:[], 引用的其它类,动态加载
    //mixins 多引用
    //statics 静态类
    //inheritableStatics 可以继承的静态类属性
    //singleton 单件模式
    say:function(){
       console.log(this.name + '说:hello');
    },
    constructor: function (config) {
        this.initConfig(config);
    }
});

2.使用:

var p=new person();
p.say();
p.setName('newname')

var p2=Ext.create('person',{
    name:'name2',
    age:3
});

在线界面设计器

http://tof2k.com/ext/formbuilder/

推荐:使用jquery-validationEngine框架,4步实现前端JS校验

第1步:    引入CSS和JS         <script type="text/javascript" src="${base}/static/js/frontbackend.jsfv=${fv}"></script> <script src="${static}/framew

本文不是教程,只是把最最常用的记在这里备查,就是一些代码段。 使用sencha cmd 1. 下载安装 https://www.sencha.com/products/extjs/cmd-download/ 打开命令行输入:sencha 可以看到安装成功

相关阅读排行


用户评论

游客

相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。