Extjs4之下拉框三级联动

最近做了一个小的案例，用到了下拉框的三级联动效果。这个三级联动是系部、专业、班级。通过系部可以获取对应的专业，通过专业又可以获取对应的班级。具体实现如下：

一、系部下拉框

//系部信息
//定义下拉框的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'
    }
});

这都是自定义控件的方式实现的，使用时只在Extjs代码中通过配置的方式{xtype:comcmb_class}加入即可。