这个三级联动是系部、专业、班级。通过系部可以获取对应的专业,通过专业又可以获取对应的班级。具体实现如下:
一、系部下拉框
- //系部信息
- //定义下拉框的Model对象,包含两个属性:id,name
- Ext.define('DepInf', {
- extend: 'Ext.data.Model',
- fields: [
- { name: 'depId', type: 'int' },
- { name: 'depName', type: 'string' }
- ]
- });
- //后台获取数据,数据类型:Json,格式是:{depInfCount:3,depInf:{depId:1,depName:'aaa'}}
- var COMdepInfComboStore = Ext.create('Ext.data.Store', {
- model: 'DepInf',
- proxy: {
- type: 'ajax',//请求方式
- url: 'aspx/DepInf/List4Combo.aspx',//获取数据的路径
- reader: {
- type: 'json',//返回到前台的数据类型
- totalProperty: 'depInfCount',
- root: 'depInf'
- }
- },
- autoLoad: false//是否自动加载
- });
- //下拉框加载数据
- COMdepInfComboStore.load({
- scope: this,
- callback: function (records, operation, success) {
- var responseData = COMdepInfComboStore.getProxy().getReader().rawData;
- if (typeof (responseData) == "undefined") {
- return;
- }
- var responseFlag = responseData.success;
- if (responseFlag != null && responseFlag == false) {
- Ext.Msg.alert('温馨提示', '您好,加载系部下拉框失败!');
- }
- }
- });
- //创建下拉框
- var COMdepInfCombo = Ext.define('COMDepInfCombo', {
- extend: 'Ext.form.ComboBox',
- xtype: 'comcmb_dep',
- fieldLabel: '系部',
- store: COMdepInfComboStore,
- queryMode: 'local',
- width: 350,
- editable: false, //不允许输入
- forceSelection: true, //必须选择一项
- emptyText: '请选择',//提示文本
- style: 'margin: 3px 0 0 0',
- displayField: 'depName',//下拉框中显示文本
- valueField: 'depId',//下拉框中value值,也就是<option>标签中value属性值
- name: 'depInfCombo',
- listeners: {//事件监听
- select: function (combo, record, index) {//选择事件监听
- if (record.length != 0) {
- COMmajorComboStore.proxy.url = 'aspx/Depmajor/List4Combo.aspx?depId=' + combo.value;//获取专业的数据
- COMmajorComboStore.load({
- scope: this,
- callback: function (records, operation, success) {
- var responseData = COMmajorComboStore.getProxy().getReader().rawData;
- if (typeof (responseData) == "undefined") {
- return;
- }
- var responseFlag = responseData.success;
- if (responseFlag != null && responseFlag == false) {
- Ext.Msg.alert('温馨提示', '您好,加载专业下拉框失败!');
- }
- }
- });
- }
- }
- }
- });
二、专业下拉框
- Ext.define('MajorInf', {
- extend: 'Ext.data.Model',
- fields: [
- { name: 'majorId', type: 'int' },
- { name: 'majorName', type: 'string' }
- ]
- });
- var COMmajorComboStore = Ext.create('Ext.data.Store', {
- model: 'MajorInf',
- proxy: {
- type: 'ajax',
- reader: {
- type: 'json',
- totalProperty: 'majorInfCount',
- root: 'majorInf'
- }
- },
- autoLoad: false
- });
- var COMmajorCombo = Ext.define('COMMajorCombo', {
- extend: 'Ext.form.ComboBox',
- xtype: 'comcmb_major',
- fieldLabel: '专业',
- store: COMmajorComboStore,
- queryMode: 'local',
- width: 350,
- editable: false, //不允许输入
- forceSelection: true, //必须选择一项
- emptyText: '请选择',
- style: 'margin: 3px 0 0 0',
- displayField: 'majorName',
- valueField: 'majorId',
- name: 'majorCombo',
- listeners: {
- select: function (combo, record, index) {
- COMclassComboStore.proxy.url = "Admin/aspx/Depclass/List4Combo.aspx?majorId=" + combo.value;
- COMclassComboStore.load({
- scope: this,
- callback: function (records, operation, success) {
- var responseData = COMclassComboStore.getProxy().getReader().rawData;
- if (typeof (responseData) == "undefined") {
- return;
- }
- var responseFlag = responseData.success;
- if (responseFlag != null && responseFlag == false) {
- Ext.Msg.alert('温馨提示', '您好,加载班级下拉框失败!');
- }
- }
- });
- }
- }
- });
三、班级下拉框
- //班级信息
- Ext.define('ClassInf', {
- extend: 'Ext.data.Model',
- fields: [
- { name: 'classNo', type: 'string' },
- { name: 'className', type: 'string' }
- ]
- });
- var COMclassComboStore = Ext.create('Ext.data.Store', {
- model: 'ClassInf',
- proxy: {
- type: 'ajax',
- reader: {
- type: 'json',
- totalProperty: 'classInfCount',
- root: 'classInf'
- }
- },
- autoLoad: false
- });
- var COMclassCombo = Ext.define('COMclassCombo', {
- extend: 'Ext.form.ComboBox',
- xtype: 'comcmb_class',
- fieldLabel: '班级',
- store: COMclassComboStore,
- queryMode: 'local',
- width: 350,
- editable: false, //不允许输入
- forceSelection: true, //必须选择一项
- emptyText: '请选择',
- style: 'margin: 3px 0 0 0',
- displayField: 'className',
- valueField: 'classNo',
- name: 'classCombo'
- }
- });