extjs几种常用方法

浏览数：93 / 时间：2015年06月09日

1，提交

　　这种情况一般用于登录界面，也在表单提交应用比较多，大多是一个Button的提交事件，代码为：

var loginForm =........;
if (loginForm .form.isValid()) {
    var params = loginCenter.getForm().getValues();
    console.log("params= %o",params);//一般这里打个log看看提交的参数
    loginForm .getForm().submit({
        params:params,
        waitTitle : "请稍候",
        waitMsg : ‘正在登录......‘,
        url : ‘LoginAction.do‘,

        success : function(form, action) {
        　　　//登录成功操作    
        },
        failure : function(form, action) {
             //登录失败操作    
             console.log("login failure action %o",action);//这个就可以看到为什么登录失败
        },
　 });
}

2，请求request

　　这种多用于请求少量数据，或者删除操作等，跟submit的区别就是，只要request接收到从服务器返回的结果，都是走success，不管返回的值是什么，代码为：

Ext.Ajax.request({
        url: "deleteAction.do",
        success: function(response) {
        　　//一般都会请求成功，请求回来的数据都是在response.responseText里面的
        }，
        failure:function(response){
            //一般失败都是网络原因
        }  
});

3.数据store

常用的应该分为两种，一种是treeStore树形数据,另一种就是GridStore表格数据,

首先树形数据treeStore代码:

　　树形又分两种，一种是分级加载，一种是全部加载，分级加载，是点击一个节点，然后将这个节点，传送给服务端，由服务端，根据节点加载数据，主要用于层级结构比较多，数据量比较大的情况；全部加载就是一次性将整个树形数据都获取过来，用于小型树。

　　首先看分级加载：

Ext.define(‘UMS.data.MyTreeData.Store‘, {
    extend: ‘Ext.data.TreeStore‘,
    nodeParam:‘treeId‘,//整个参数的意思是，将节点的id，保存的变量命,用于服务端解析
    autoLoad:true,
    clearOnLoad:true,
    proxy:{
        type:‘ajax‘,
        url:‘getTreeStore.do‘,//获取数据的action
        reader:{
            type:‘json‘
            root :‘children‘,//不显示root节点
        }
    },
    root:{
        id:"root_node"//根节点的id值，整个这里的意思是这个id是String不是Int
    }
});

全部加载：看过上面那个，这个就简单多了

Ext.create(‘Ext.data.TreeStore‘, {
        expanded: true,
        clearOnLoad:true,
        proxy:{
            type:‘ajax‘,
            url:‘getTreeStoreAction.do‘,
            reader:{
                type:‘json‘,
                root :‘children‘
            }
        }

    });

接着是GridStore,表格数据，一般数据比较多的时候，都是需要分页的，所以，连同分页控件，一起写上了，代码：

var itemsPerPage = 20;//这个是每页显示的条数，根据实际情况定
Ext.define(‘UMS.data.GridStore‘, {
    extend: ‘Ext.data.Store‘,
    autoLoad:{start:0,limit:itemsPerPage},
    fields: [‘id‘,‘username‘,‘name‘,‘email‘,],
    pageSize:itemsPerPage,//每页大小
    proxy:{
        type:‘ajax‘,
        url:‘getGridStoreAction.do‘,
        reader:{
            type:‘json‘,
            root:‘items‘,//这个是服务端返回数据的跟节点
            totalProperty:‘totalSize‘//这个是服务端返回数据，表示一共有多少条
        }
    },
    sorters: [{
        property: ‘username‘,//表格的内容默认根据此列排序
        direction: ‘ASC‘//升序
    }]
});

4 combox下拉框中为一个树或者panel：

Ext.define(‘UMS.TreeComboBox‘,{
    extend : ‘Ext.form.field.ComboBox‘,
    alias: ‘widget.liangzitreecombo‘,
    store : new Ext.data.ArrayStore({fields:[],data:[[]]}),//这个不用改
    editable : false,
    resizable:false,
    readOnly:false,
    editable:false,
    _idValue : null,//这条跟下面这条是自己加的属性，为这个新控件的id和text
    _txtValue : null,
    initComponent : function(){
                //初始化的时候用到，比较关键，就是要把哪个tree放进来
        var combo = this;
        this.callParent(arguments);
        this.treeRenderId = Ext.id();
  
        //必须要用这个定义tpl
        this.tpl = new Ext.XTemplate(‘<tpl for="."><div style="height:100‘ + ‘px;"><div id="‘ + this.treeRenderId+ ‘"></div></div></tpl>‘);
               //这个就是我们放进去的tree了
        var treeObj = new Ext.tree.Panel({
            border : false,
            height : 250,
            width : 500,
            autoScroll : true,
            id:‘parentGroupTree‘,
            rootVisible: false, 
            store : Ext.create(‘Ext.data.TreeStore‘, {
                expanded: true,
                clearOnLoad:true,
                proxy:{
                    type:‘ajax‘,
                    url:‘getTreeStoreAction.do‘,
                    reader:{
                        type:‘json‘,
                        root :‘children‘
                    }
                }
            })
        });
//定义树形的点击事件，主要就是框体内文字的显示，以及收回面板
  treeObj.on(‘itemclick‘,function(view,rec){
   if(rec){
    combo._idValue = rec.get(‘id‘);
    combo.collapse();
   }
  });
  treeObj.on(‘beforeitemexpand‘,function( node, eOpts ){
     //这里是树展示前的一些准备
    });
 //这里是必要的，不要改
  this.on(
  ‘expand‘,function(){
       if(!treeObj.rendered&&treeObj&&!this.readOnly){
           Ext.defer(function(){
            treeObj.render(this.treeRenderId);
           },300,this);
       }
   });
 },
 getValue : function(){//获取id值
         return this._idValue;
 },
 getTextValue : function(){//获取text值
  return this._txtValue;
 },
 setLocalValue : function(txt,id){//设值
  this._idValue = id;
  this.setValue(this._txtValue = txt);
 }
});