ExtJs多级联动菜单的一种实现

1.ExtJs中的Combos控件，定义数据源store的时候可以采用下面的方式：

代码

var store = new Ext.data.SimpleStore({                            //定义组合框中显示的数据源
            //fields: ['Item', 'ItemValue'],
            fields: ['Item', 'ItemValue', 'ParentID', 'strValueID'],
            data: arrayItemStore
        });

fields可以设置多个字段，只要跟data属性的赋值一致就可以了。data的赋值需要是一个嵌套数组，其中数组的字元素就是fields定义的数组，如下所示：

data:
[

　　['公司1','2458','0','48'], //需要跟fields定义的数组维度一致。
　　['公司2','542','0','478'],
　　['公司3','45','0','47']

]

2.加入公司和地区，根据parentID来关联，可以添加如下的代码：

代码

var co = Ext.getCmp("co");
var dq = Ext.getCmp("dq");
if (!Ext.isEmpty(co)) {
co.on('beforeselect', function (box, record, index) {
dq.store.filter('ParentID', record.get('strValueID'));
}

这里的record是Extjs传递过来的当前选中项的数据集，可以方便的取到我们在给Combos定义store时的数据项。
dq.store.filter方法用于筛选Combos地区的数据，这里有一点要注意，既然是筛选，地区Combos肯定得包含有所有的地区才可以。
如果需要Combos地区从数据库读取数据，可以采用下面的形式：

代码

//function that gets city store
function getCityStore()
{
    var store = new Ext.data.JsonStore({
        url: 'get-city-by-country-id',
        //baseParams: countryId:countryIdVar,
        fields: [
            {name:'cityId', type:'int'},
            'cityName'
        ]
    });
    return store;
}

//than I have a countries combo
var countries = new Ext.form.ComboBox({
    id:'country',
    store: getCountryStore(),
    typeAhead: true,
    triggerAction: 'all',
    emptyText: '...',
    listeners: {
        select: {
            fn:function(combo, value) {
                var modelDest = Ext.getCmp('city');
                //set and disable cities
                modelDest.setDisabled(true);
                modelDest.setValue('');
                modelDest.store.removeAll();
                //reload region store and enable region
                modelDest.store.reload({
                    params: { countryId: combo.getValue() }
                });
                modelReg.setDisabled(false);
        }
        }
    }
})

第三种方法：

var provinces = [[1,'北京'],[2,'上海']];

var cities = new Array();
cities[1] = [[11,'海淀'],[22,'东城']];
cities[2] = [[33,'黄埔'],[44,'浦东'],[55,'静安']];
var comboProvinces = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore( {
fields: ["provinceId", "provinceName"],
data: provinces
}),
listeners:{
select:function(combo, record,index){
comboCities.clearValue();
comboCities.store.loadData(cities[record.data.provinceId]);
}
},
valueField :"provinceId",
displayField: "provinceName",
mode: 'local',
forceSelection: true,
blankText:'请选择省份',
emptyText:'请选择省份',
hiddenName:'provinceId',
editable: false,
triggerAction: 'all',
allowBlank:true,
fieldLabel: '请选择省份',
name: 'provinceId',
80
});
var comboCities = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore( {
fields: ["cityId",'cityName'],
data:[]
}),
valueField :"cityId",
displayField: "cityName",
mode: 'local',
forceSelection: true,
blankText:'选择地区',
emptyText:'选择地区',
hiddenName:'cityId',
editable: false,
triggerAction: 'all',
allowBlank:true,
fieldLabel: '选择地区',
name: 'cityId',
80
});

var provinces = [[1,'北京'],[2,'上海']];
var cities = new Array(); 
cities[1] = [[11,'海淀'],[22,'东城']]; 
cities[2] = [[33,'黄埔'],[44,'浦东'],[55,'静安']];

var comboProvinces = new Ext.form.ComboBox({

           store: new Ext.data.SimpleStore(  {
                   fields: ["provinceId", "provinceName"],
                   data: provinces
          }),

           listeners:{
                  select:function(combo, record,index){
                         comboCities.clearValue();
                         comboCities.store.loadData(cities[record.data.provinceId]);
                 }
          },

          valueField :"provinceId",
          displayField: "provinceName",
          mode: 'local',
          forceSelection: true,
          blankText:'请选择省份',
          emptyText:'请选择省份',
          hiddenName:'provinceId',
          editable: false,
          triggerAction: 'all',
          allowBlank:true,
          fieldLabel: '请选择省份',
          name: 'provinceId',
           80 

});

 var comboCities = new Ext.form.ComboBox({
            store: new Ext.data.SimpleStore(  {
                        fields: ["cityId",'cityName'],
                       data:[]
            }),

            valueField :"cityId",
            displayField: "cityName",
            mode: 'local',  
            forceSelection: true,
            blankText:'选择地区',
            emptyText:'选择地区',
            hiddenName:'cityId',
            editable: false,
            triggerAction: 'all',
            allowBlank:true,
            fieldLabel: '选择地区',
            name: 'cityId',
             80
});

ComboBox控件的id和hiddenName不要设置成一样，否则会选不中选项，不知道是不是ComboBox的一个bug。