实现原理:两个下拉框,第一个下拉框首先load数据源,在select的事件中在load第二个数据源.
注:有三个下拉框时可以在第一个下拉框就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. }