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"); //参数是元素idconsole.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);                         }           });

对话框

//confirmExt.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/