ExtJs下拉框联动

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

注:有三个下拉框时可以在第一个下拉框就load另外两个下拉框中的数据

 

实例代码：

 

[javascript] view plain copy

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