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 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',
          width: 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',
            width: 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',

          width: 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',

            width: 80

}); 

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