ExtJs之下拉框联动－前台纯JS实现

通过extJS实现下拉框联动，即有两个下拉框，其中一个的下拉选项是根据另一个下拉框所选择的数据而变化的。现在网上有同学实现过，其实现思路是针对其中一个的下拉框的select事件编写代码，通过替换另一个下拉框store的proxy，然后重新装载实现级联的。代码如下：

Js代码

1. listeners:{        
2.     select : function(combo, record, index){      
3.     childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});      
4.         childStore.load();       
5.     }      
6. }  

而我这里要实现的级联是另一个思路：一开始装载所有的数据，然后通过过滤数据，实现数据的级联更新。举例如下：
我们需要客户选择所在省和所在市，通过下拉列表，先选择省，然后所在市的下拉列表中过滤出该省下的所有市，提供给用户选择。
数据库设计：建立代码、省市对应表，如：37－山东、3701－济南、3702－青岛、3703－淄博、…
在所在省下拉列表的store中，获取代码为两位长度的省市数据，这样将获取到所有的省名称列表
另外建立一个Store，检索代码长度超过两位长度的省市数据，这样将获取所有的市名称列表

Js代码

1. var provinceStore = new Ext.data.Store({      
2.     proxy: new Ext.data.HttpProxy({      
3.         url: 'loadCity.do?method=getProvince'   //获取所有的省列表的Ajax请求   
4.     }),      
5.     reader: new Ext.data.JsonReader({      
6.     root: 'list',      
7.     id: 'id'     
8.     }, [      
9.         {name: 'code', mapping: 'code'},      
10.         {name: 'name', mapping: 'name'}      
11.     ])      
12. });       
13. var cityStore = new Ext.data.Store({      
14.     proxy: new Ext.data.HttpProxy({      
15.         url: 'loadCity.do?method=getCity'   //获取所有的市列表的Ajax请求   
16.     }),      
17.     reader: new Ext.data.JsonReader({      
18.     root: 'list',      
19.     id: 'id'     
20.     }, [      
21.         {name: 'code', mapping: 'code'},      
22.         {name: 'name', mapping: 'name'}      
23.     ])      
24. });       
25.   
26. {      
27.     fieldLabel: '所在省',      
28.     xtype:'combo',      
29.     store: provinceStore,      
30.     valueField :"name",      
31.     displayField: "name",      
32.     mode: 'remote',      
33.     forceSelection: true,   
34.     emptyText:'请选择所在省...',   
35.     hiddenName:'province',   
36.     editable: false,   
37.     triggerAction: 'all',    
38.     id: 'province',      
39.     name: 'province',      
40.     width: 400,      
41.     listeners:{        
42.         select : function(combo, record, index){   
43.             //获取当前选择的省代码，然后在cityStore过滤出所有属于这个省下的市   
44.             var cityField = conditionForm.form.findField("city");   
45.             cityField.setValue('');   
46.             var codeHead = record.get('code');   
47.             cityStore.filter('code', codeHead);   
48.                
49.             //新建一个SimpleStore，然后把过滤出来的结果添加到这个SimpleStore中   
50.             var newStore = new Ext.data.SimpleStore({fields: ['code', 'name']});   
51.             newStore.add(cityStore.getRange());   
52.   
53.             //设置所在市下拉列表的新的Store   
54.             cityField.store = newStore;   
55.   
56.             //设置所在市下拉列表的列表项的新的Store   
57.             if(cityField.view)   
58.                 cityField.view.setStore(newStore);   
59.         }      
60.     }      
61. },{      
62.     fieldLabel: '所在市',      
63.     xtype:'combo',      
64.     store: cityStore,      
65.     valueField :"name",      
66.     displayField: "name",      
67.     mode: 'remote',      
68.     forceSelection: true,   
69.     emptyText:'请选择所在市...',   
70.     hiddenName:'city',   
71.     editable: false,   
72.     triggerAction: 'all',   
73.     id: 'city',      
74.     name: 'city',      
75.     width: 400      
76. }