JS前端框架10 Extjs5 使用Tips

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

使用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/