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

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

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

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

 

1. var provinceComBo=new Ext.form.ComboBox({  
2.  
3.               hiddenName:'province',  
4.  
5.               name: 'province_name',  
6.  
7.               valueField:"text",  
8.  
9.               displayField:"text",  
10.  
11.               mode:'local',  
12.  
13.               fieldLabel: '所在省份',  
14.  
15.               blankText:'请选择省份',  
16.  
17.               emptyText:'请选择省份',  
18.  
19.               editable:false,  
20.  
21.               anchor:'90%',  
22.  
23.               forceSelection:true,  
24.  
25.               triggerAction:'all',  
26.  
27.               store:new Ext.data.SimpleStore({fields: ["text","city"],data:citys,sortInfo:{field:'text'}}),  
28.  
29.               listeners:{  
30.  
31.                      select:function(combo, record,index){  
32.  
33.                             cityCombo.clearValue();  
34.  
35.                             cityCombo.store.loadData(record.data.city);  
36.  
37.                      }  
38.  
39.               }  
40.  
41.        })  
42.  
43.    
44.  
45.        var cityCombo=new Ext.form.ComboBox({  
46.  
47.               hiddenName:'city',  
48.  
49.               name:'city_name',  
50.  
51.               valueField:"text",  
52.  
53.               displayField:"text",  
54.  
55.               mode:'local',  
56.  
57.               fieldLabel: '所在城市',  
58.  
59.               blankText:'请选择城市',  
60.  
61.               emptyText:'请选择城市',  
62.  
63.               editable:false,  
64.  
65.               anchor:'90%',  
66.  
67.               forceSelection:true,  
68.  
69.               triggerAction:'all',  
70.  
71.               store:new Ext.data.SimpleStore({fields: ["text"],data:[],sortInfo:{field:'text'}})  
72.  
73.        });  

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

1. store:new Ext.data.SimpleStore({fields: ["text","city"],data:citys,sortInfo:{field:'text'}}),  
2.  
3.               listeners:{  
4.  
5.                      select:function(combo, record,index){  
6.  
7.                             cityCombo.clearValue();  
8.  
9.                             cityCombo.store.loadData(record.data.city);  
10.  
11.                      }  
12.  
13.               }  

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

城市combobox的store定义没什么特别，就是显示城市名称可以了。

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

 

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

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

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

点击 这里下载例程。