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来过滤时首次加载有缓存。