extjs ComboBox联动下拉菜单示例

阅读更多

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。