ExtJs下拉框联动

实现原理：两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源.
 

实例代码：

 

1.//  第一个下拉框   
2.var parentStore = new Ext.data.Store({   
3.    proxy: new Ext.data.HttpProxy({   
4.        url: 'loadByParentid.action?parentid=1001'  
5.    }),   
6.    reader: new Ext.data.JsonReader({   
7.    root: 'list',   
8.    id: 'id'  
9.    }, [   
10.        {name: 'id', mapping: 'id'},   
11.        {name: 'mc', mapping: 'name'}   
12.    ])   
13.});    
14.//     第二个下拉框   
15.var childStore = new Ext.data.Store({   
16.    proxy: new Ext.data.HttpProxy({   
17.                       //这里是参数可以顺便写,这个数据源是在第一个下拉框select的时候load的   
18.        url: 'loadByParentid.action?parentid=1001'  
19.    }),   
20.    reader: new Ext.data.JsonReader({   
21.    root: 'list',   
22.    id: 'id'  
23.    }, [   
24.        {name: 'id', mapping: 'id'},   
25.        {name: 'mc', mapping: 'name'}   
26.    ])   
27.});    
28.  
29.      {   
30.    fieldLabel: '请选择分类',   
31.           xtype:'combo',   
32.           store: parentStore,   
33.           valueField :"id",   
34.           displayField: "mc",   
35.           mode: 'local',   
36.           forceSelection: true,//必须选择一项   
37.           emptyText:'请选择分类...',//默认值   
38.           hiddenName:'interviewsDetail.parent_category',//hiddenName才是提交到后台的input的name   
39.           editable: false,//不允许输入   
40.           triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。   
41.           //allowBlank:false,//该选项值不能为空   
42.    id : 'parent_id',   
43.           name: 'parent',   
44.        width: 400,   
45.        listeners:{     
46.            select : function(combo, record,index){   
47.                childStore.proxy= new Ext.data.HttpProxy({url: 'loadByParentid.action?parentid=' + combo.value});   
48.                    childStore.load();    
49.            }   
50.        }   
51.       },{   
52.           xtype:'combo',   
53.           store: childStore,   
54.           valueField :"id",   
55.           displayField: "mc",   
56.    //数据是在本地   
57.           mode: 'local',   
58.           forceSelection: true,//必须选择一项   
59.           emptyText:'请选择子分类...',//默认值   
60.           hiddenName:'interviewsDetail.child_category',//hiddenName才是提交到后台的input的name   
61.           editable: false,//不允许输入   
62.           triggerAction: 'all',//因为这个下拉是只能选择的，所以一定要设置属性triggerAction为all，不然当你选择了某个选项后，你的下拉将只会出现匹配选项值文本的选择项，其它选择项是不会再显示了，这样你就不能更改其它选项了。   
63.           //allowBlank:false,//该选项值不能为空   
64.           fieldLabel: '选择',   
65.           id : 'child_id',   
66.           name: 'child',   
67.    width: 400   
68.       }