ExtJS4.2 下拉列表Combobox級聯選擇

本文主要講解了如何實現ExtJS4.2中下拉列表（Combobox）的級聯選擇，即先選擇省份，自動將城市過過濾爲該省份下的城市列表，實例圖片如：


在線演示  /  示例代碼


省份-下拉列表：

{
                    xtype:'combo',
                    id:'provinceCombo',
                    labelStyle : 'text-align:right',
                    fieldLabel: '省',
                                displayField: 'text',
                                valueField: 'value',
                                store: createStore(),
                                editable : false,
                                queryMode: 'local',
                                typeAhead: true,
                                listeners: {
                                    change: function(combo, nv, ov){
                                        if(nv!=ov){
                                        var cityCombo = Ext.getCmp("cityCombo");
                                        cityCombo.clearValue();
                                        
                                        var cityStore=cityCombo.getStore();
                                        cityStore.load();
                                      }
                                    }
                                }
                }

城市-下拉列表：

{
                xtype: 'container',
                flex: 1,
                layout: 'anchor',
                items: [{
                    xtype:'combo',
                    id:'cityCombo',
                    labelStyle : 'text-align:right',
                    fieldLabel: '市',
                    editable : false,
                    displayField: 'text',
                    valueField: 'value',
                    store: 'CityStore',
                    queryMode: 'remote',
                    typeAhead: true
                }]
            }

城市下拉列表對應的Store-CityStore:

Ext.define('Itdatum.store.CityStore', {
    extend: 'Ext.data.Store',
    fields:['id','value','text','parentid'],
    autoLoad: false,
    proxy: {
      type: "ajax",
      url: "json/city.json",
      reader: {
        type: "json",
        root: "data"
      }
   },
   listeners: {
            'load': function(store, operation, eOpts){
                var proviceCode=Ext.getCmp('provinceCombo').getValue();
                store.filterBy(function(record) {
                    return record.get('parentid') == proviceCode;  
                });
            }
     }
});

注意：城市下拉列表需要設置queryModel: 'remote',否則有緩存問題，即城市下拉列表加載數據時採用filterBy來過濾時首次加載有緩存。