Extjs4之下拉框三级联动

这个三级联动是系部、专业、班级。通过系部可以获取对应的专业，通过专业又可以获取对应的班级。具体实现如下：

一、系部下拉框

[javascript] view plain copy

1. //系部信息  
2. //定义下拉框的Model对象，包含两个属性：id,name  
3. Ext.define('DepInf', {  
4.     extend: 'Ext.data.Model',  
5.     fields: [  
6.                  { name: 'depId', type: 'int' },  
7.                  { name: 'depName', type: 'string' }  
8.              ]  
9. });  
10. //后台获取数据，数据类型：Json，格式是:{depInfCount:3,depInf:{depId:1,depName:'aaa'}}  
11. var COMdepInfComboStore = Ext.create('Ext.data.Store', {  
12.     model: 'DepInf',  
13.     proxy: {  
14.         type: 'ajax',//请求方式  
15.         url: 'aspx/DepInf/List4Combo.aspx',//获取数据的路径  
16.         reader: {  
17.             type: 'json',//返回到前台的数据类型  
18.             totalProperty: 'depInfCount',  
19.             root: 'depInf'  
20.         }  
21.     },  
22.     autoLoad: false//是否自动加载  
23. });  
24. //下拉框加载数据  
25. COMdepInfComboStore.load({  
26.     scope: this,  
27.     callback: function (records, operation, success) {  
28.         var responseData = COMdepInfComboStore.getProxy().getReader().rawData;  
29.         if (typeof (responseData) == "undefined") {  
30.             return;  
31.         }  
32.         var responseFlag = responseData.success;  
33.         if (responseFlag != null && responseFlag == false) {  
34.             Ext.Msg.alert('温馨提示', '您好，加载系部下拉框失败！');  
35.         }  
36.     }  
37. });  
38. //创建下拉框  
39. var COMdepInfCombo = Ext.define('COMDepInfCombo', {  
40.     extend: 'Ext.form.ComboBox',  
41.     xtype: 'comcmb_dep',  
42.     fieldLabel: '系部',  
43.     store: COMdepInfComboStore,  
44.     queryMode: 'local',  
45.     width: 350,  
46.     editable: false,      //不允许输入  
47.     forceSelection: true, //必须选择一项  
48.     emptyText: '请选择',//提示文本  
49.     style: 'margin: 3px 0 0 0',  
50.     displayField: 'depName',//下拉框中显示文本  
51.     valueField: 'depId',//下拉框中value值，也就是<option>标签中value属性值  
52.     name: 'depInfCombo',  
53.     listeners: {//事件监听  
54.         select: function (combo, record, index) {//选择事件监听  
55.             if (record.length != 0) {  
56.                 COMmajorComboStore.proxy.url = 'aspx/Depmajor/List4Combo.aspx?depId=' + combo.value;//获取专业的数据  
57.                 COMmajorComboStore.load({  
58.                     scope: this,  
59.                     callback: function (records, operation, success) {  
60.                         var responseData = COMmajorComboStore.getProxy().getReader().rawData;  
61.                         if (typeof (responseData) == "undefined") {  
62.                             return;  
63.                         }  
64.                         var responseFlag = responseData.success;  
65.                         if (responseFlag != null && responseFlag == false) {  
66.                             Ext.Msg.alert('温馨提示', '您好，加载专业下拉框失败！');  
67.                         }  
68.                     }  
69.                 });  
70.             }  
71.         }  
72.     }  
73. });  

二、专业下拉框

[javascript] view plain copy

1. Ext.define('MajorInf', {  
2.     extend: 'Ext.data.Model',  
3.     fields: [  
4.                  { name: 'majorId', type: 'int' },  
5.                  { name: 'majorName', type: 'string' }  
6.              ]  
7. });  
8. var COMmajorComboStore = Ext.create('Ext.data.Store', {  
9.     model: 'MajorInf',  
10.     proxy: {  
11.         type: 'ajax',  
12.         reader: {  
13.             type: 'json',  
14.             totalProperty: 'majorInfCount',  
15.             root: 'majorInf'  
16.         }  
17.     },  
18.     autoLoad: false  
19. });  
20.   
21. var COMmajorCombo = Ext.define('COMMajorCombo', {  
22.     extend: 'Ext.form.ComboBox',  
23.     xtype: 'comcmb_major',  
24.     fieldLabel: '专业',  
25.     store: COMmajorComboStore,  
26.     queryMode: 'local',  
27.     width: 350,  
28.     editable: false,      //不允许输入  
29.     forceSelection: true, //必须选择一项  
30.     emptyText: '请选择',  
31.     style: 'margin: 3px 0 0 0',  
32.     displayField: 'majorName',  
33.     valueField: 'majorId',  
34.     name: 'majorCombo',  
35.     listeners: {  
36.         select: function (combo, record, index) {  
37.             COMclassComboStore.proxy.url = "Admin/aspx/Depclass/List4Combo.aspx?majorId=" + combo.value;  
38.             COMclassComboStore.load({  
39.                 scope: this,  
40.                 callback: function (records, operation, success) {  
41.                     var responseData = COMclassComboStore.getProxy().getReader().rawData;  
42.                     if (typeof (responseData) == "undefined") {  
43.                         return;  
44.                     }  
45.                     var responseFlag = responseData.success;  
46.                     if (responseFlag != null && responseFlag == false) {  
47.                         Ext.Msg.alert('温馨提示', '您好，加载班级下拉框失败！');  
48.                     }  
49.                 }  
50.             });  
51.         }  
52.     }  
53. });  

三、班级下拉框

[javascript] view plain copy

1. //班级信息  
2. Ext.define('ClassInf', {  
3.     extend: 'Ext.data.Model',  
4.     fields: [  
5.                  { name: 'classNo', type: 'string' },  
6.                  { name: 'className', type: 'string' }  
7.              ]  
8. });  
9. var COMclassComboStore = Ext.create('Ext.data.Store', {  
10.     model: 'ClassInf',  
11.     proxy: {  
12.         type: 'ajax',  
13.         reader: {  
14.             type: 'json',  
15.             totalProperty: 'classInfCount',  
16.             root: 'classInf'  
17.         }  
18.     },  
19.     autoLoad: false  
20. });  
21.   
22. var COMclassCombo = Ext.define('COMclassCombo', {  
23.     extend: 'Ext.form.ComboBox',  
24.     xtype: 'comcmb_class',  
25.     fieldLabel: '班级',  
26.     store: COMclassComboStore,  
27.     queryMode: 'local',  
28.     width: 350,  
29.     editable: false,         //不允许输入  
30.     forceSelection: true,   //必须选择一项  
31.     emptyText: '请选择',  
32.     style: 'margin: 3px 0 0 0',  
33.     displayField: 'className',  
34.     valueField: 'classNo',  
35.     name: 'classCombo'  
36.     }  
37. });