Ext4 combo二级联动

先不多说，上代码（关键代码）:

tbar : ['poolId：',{  
        xtype : 'combo',  
        id : 'poolId',  
        name : 'pool',  
        editable : true,  
        value : '',  
        store : Ext.getStore('poolStore'),  
        displayField : 'poolName',  
        valueField : 'poolValue',  
        matchFieldWidth: false,  
        //queryMode: 'remote',  
        triggerAction:'all',  
        listConfig : {  
            loadingText: 'Loading...',  
            width: 200,  
            autoHeight:true  
        },  
        listeners : {  
            'select' : function(obj,records,options){  
                Ext.getCmp('triggerId').clearValue();   
                var triggerStore = Ext.data.StoreManager.lookup('triggerStore');   
                triggerStore.getProxy().extraParams['criteria.poolId'] = obj.getValue();  
                triggerStore.load();   
            }  
        }  
    },'-','triggerId:',{  
        xtype : 'combo',  
        id : 'triggerId',  
        name : 'trigger',  
        editable : true,  
        value : '',  
        store : Ext.getStore('triggerStore'),  
        displayField : 'triggerName',  
        valueField : 'triggerValue',  
        matchFieldWidth: false,  
        queryMode: 'local',  
        triggerAction:'all',  
        listConfig : {  
            loadingText: 'Loading...',  
            width: 200,  
            autoHeight:true  
        }  
    },'-',{  
        text : '查询',  
        iconCls : 'icon-search',  
        action : 'select'  
    }]

      上面的代码主要是grid上的tbar部分，这里有几点需要注意。配置项store : Ext.getStore('poolStore'),这里是根据storeId获取store对象，因为我这里使用的是Ext4的MVC模式，这里贴出store部分代码（该部分代码在controller中）：

Ext.create('Kira.store.PoolStore', {  
        storeId : 'poolStore'  
    });

 定义store的代码如下：

Ext.define('Kira.store.PoolStore', {  
    extend : 'Ext.data.Store',  
    model : 'Kira.model.PoolStore',  
    remoteFilter : true,//远程过滤  
    remoteSort : true,//远程排序  
    proxy : {  
        type : 'ajax',  
        url : 'triggerMetadata/getAllPoolIdList.action',  
        actionMethods : {  
            read : 'POST'  
        },  
        extractResponseData : function(response){  
            var jsonArr = [],jsonObj = {};  
            var resp =Ext.decode(response.responseText);  
            var resultData = resp["resultData"];//the rows object  
            for(var i=0,len = resultData.length;i<len;i++){  
                jsonObj['poolValue']=resultData[i];  
                jsonObj['poolName']=resultData[i];  
                jsonArr.push(jsonObj);  
                jsonObj = {};  
            }  
            return jsonArr;    
        },  
        reader : {  
            type : 'json',  
            root : 'resultData'  
        }  
    }  
      
});

 这里由于项目的原因，后端返回的数据并不是标准格式，笔者在这里重写了Ext的方法 : extractResponseData, 该方法在源代码里定义如下：

/** 
     * Template method to allow subclasses to specify how to get the response for the reader. 
     * @template 
     * @private 
     * @param {Object} response The server response 
     * @return {Object} The response data to be used by the reader 
     */  
    extractResponseData: function(response) {  
        return response;  
    },

 该方法很简单，只是简单返回 response对象，注释里说明了该方法允许子类根据需要重写该方法。这里要返回如下格式的数据即可：

{
	"contextData":{
		"paging":{
			"currentPage":1,
			"currentResultNum":0,
			"firstPage":0,
			"firstResult":0,
			"firstRownum":1,
			"inited":false,
			"lastPage":0,
			"lastRownum":2147483647,
			"maxResults":2147483647,
			"totalResults":0
		}
	},
	"resultData":["yihaodian/web-pool-simulator"]
}

 定义Model比较简单：

Ext.define('Kira.model.PoolStore', {  
    extend : 'Ext.data.Model',  
    fields : ['poolValue', 'poolName']  
});

       tbar里的另外的配置项：queryMode和之前版本的mode一样，listConfig配置项主要是定义combo下拉框，一般来说，默认情况下，下拉框的宽度和combo输入框的宽度是一样的，这里的配置项可以让你定制下拉框的宽度等。这里select部分：

'select' : function(obj,records,options){  
    Ext.getCmp('triggerId').clearValue();   
        var triggerStore = Ext.data.StoreManager.lookup('triggerStore');   
        triggerStore.getProxy().extraParams['criteria.poolId'] = obj.getValue();  
        triggerStore.load();   
}

       是联动的关键，当选择第一个combo时，要清空第二个要级联的combo，然后传递该下拉选择值。这里将第一个combo要注意的部分都贴出来了，第二个下拉框类似，不再赘述。

效果如图：