extjs几种常用方法

1,提交

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

extjs几种常用方法
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);//这个就可以看到为什么登录失败
        },
  }); }
extjs几种常用方法

2,请求request

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

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

3.数据store

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

首先树形数据treeStore代码:

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

  首先看分级加载:

extjs几种常用方法
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
    }
});
extjs几种常用方法

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

extjs几种常用方法
Ext.create(‘Ext.data.TreeStore‘, {
        expanded: true,
        clearOnLoad:true,
        proxy:{
            type:‘ajax‘,
            url:‘getTreeStoreAction.do‘,
            reader:{
                type:‘json‘,
                root :‘children‘
            }
        }

    });
extjs几种常用方法

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

extjs几种常用方法
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‘//升序
    }]
});
extjs几种常用方法

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

extjs几种常用方法
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);
 }
});
extjs几种常用方法

extjs几种常用方法

上一篇:ExtJS 开发总结


下一篇:js:常用到的js操作记录