用Ext 2.0 combobox 做的省份和城市联动选择框


 

     因项目需要,做了这个,发上来给大家参考一下,呵呵。

     刚开始的思路是通过定义好的数组通过comboboxstoreloadData方式加载数据,后来发现还不如直接定义好数组格式就是store的格式,然后直接附加到storedata里更简单,而且也方便城市的数据的载入。

     我们来看看两个comboBox的定义:

 


  
    
  

       var provinceComBo=new Ext.form.ComboBox({

              hiddenName:'province',

              name: 'province_name',

              valueField:"text",

              displayField:"text",

              mode:'local',

              fieldLabel: '所在省份',

              blankText:'请选择省份',

              emptyText:'请选择省份',

              editable:false,

              anchor:'90%',

              forceSelection:true,

              triggerAction:'all',

              store:new Ext.data.SimpleStore({fields: ["text","city"],data:citys,sortInfo:{field:'text'}}),

              listeners:{

                     select:function(combo, record,index){

                            cityCombo.clearValue();

                            cityCombo.store.loadData(record.data.city);

                     }

              }

       })

 

       var cityCombo=new Ext.form.ComboBox({

              hiddenName:'city',

              name:'city_name',

              valueField:"text",

              displayField:"text",

              mode:'local',

              fieldLabel: '所在城市',

              blankText:'请选择城市',

              emptyText:'请选择城市',

              editable:false,

              anchor:'90%',

              forceSelection:true,

              triggerAction:'all',

              store:new Ext.data.SimpleStore({fields: ["text"],data:[],sortInfo:{field:'text'}})

       });

 

comboBox的其它定义我就不详细说了,有兴趣可以参考我的文章《Ext2.0 form使用实例》。我们重点研究一下它的sotre的定义。省份的store定义如下:


  
    
  

              store:new Ext.data.SimpleStore({fields: ["text","city"],data:citys,sortInfo:{field:'text'}}),

              listeners:{

                     select:function(combo, record,index){

                            cityCombo.clearValue();

                            cityCombo.store.loadData(record.data.city);

                     }

              }

 

store定义了两个字段,第一字段就是省份的显示和值字段,第二个字段就比较特殊了,保存了该省份的城市数组。这样的好处就是当出发选择事件的时候,直接将city字段的数据调入到城市的store就可以选择该省份的城市了,避免了通过循环对数据进行处理操作。不过在城市加载数据前,一定要清除城市选择的输入值(cityCombo.clearValue();)。

城市comboboxstore定义没什么特别,就是显示城市名称可以了。

在两个combobox中我还设置了一个排序(sortInfo:{field:'text'}),这样就更方便了。不过要按中文排序,得重载storeapplySort属性就行了,具体可以参考一下地址:

http://jstang.5d6d.com/thread-362-1-4.html

 

具体的数据定义可看一下例程里面的city.js

如果需要一个id怎么办?重新定义一下store的字段和修改city的数据定义就可以了。如果数据在后台,则可以通过选择省份后动态修改cityurl就行了。

希望通过这个例子,大家可以很轻松的做出combobox联动的其它例子,呵呵。

 

点击这里下载例程。

 

你可能感兴趣的:(combobox)