ExtJs之下拉框联动

在ext的世界里面,我重新感受到了在学校里玩swing的记忆.那时我们都需要为一个控件创建一个数据源,在把这个数据源绑定在控件上.ext也是如此.

首先,两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源,这就是一个简单的二级联动的实现原理了.

Js代码

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.        }