extJs之下拉框联动

 

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