Extjs4之下拉框三级联动

ycjstar

于 2018-05-31 15:02:48 发布

阅读量388

点赞数

//系部信息  
//定义下拉框的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('温馨提示', '您好，加载专业下拉框失败！');  
                        }  
                    }  
                });  
            }  
        }  
    }  
});

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>

<pre class="prettyprint lang-css">.dp-highlighter { font-family: "Consolas" , "Courier New" , Courier, mono, serif; font-size: 12px; background-color: #E7E5DC; width: 99%; margin: 18px 0 18px 0 !important; padding-top: 1px; text-align: left; }

/* clear styles */
.dp-highlighter ol, .dp-highlighter ol li, .dp-highlighter ol li span { margin: 0; padding: 0; border: none; }

.dp-highlighter a, .dp-highlighter a:hover { background: none; border: none; padding: 0; margin: 0; }

.dp-highlighter .bar { padding-left: 45px; }

.dp-highlighter.collapsed .bar, .dp-highlighter.nogutter .bar { padding-left: 0px; }</pre>

ycjstar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Extjs4之下拉框三级联动

//系部信息 //定义下拉框的Model对象，包含两个属性：id,name Ext.define('DepInf', { extend: 'Ext.data.Model', fields: [ { name: 'depId', type: 'int' }, { name: 'depName'...
复制链接

扫一扫