ExtJS ComboBox之 2级联动

Ext.onReady(function () {
/*表格数据源绑定*/
var menuStore = Ext.create('Ext.data.Store', {
pageSize:10,
fields: ['id','','sm_name', 'sm_url', 'fatherGuid','fatherName'],
proxy: {
type: 'ajax',
url: '/SystemManage/GetMenuList',
reader: { 
type: 'json',
root:'data',
totalProperty:'totalCount'
}
},
autoLoad: true
});

grid = Ext.create('Ext.grid.Panel', {
store: menuStore,
columns: [
{ header: '菜单名称', dataIndex: 'sm_name', flex: 1 },
{ header: '菜单地址', dataIndex: 'sm_url', flex: 1},
{ header: '父菜单', dataIndex: 'fatherName', flex: 1 },
{ header: "操作", dataIndex: "button",  200, renderer: showbutton, flex: 1 }
],
bbar: new Ext.PagingToolbar({ 
store:menuStore,
displayInfo:true, 
displayMsg:'当前显示 {0}- {1} 条 / 共 {2}条数据', 
emptyMsg:'没有数据'
}), 
renderTo: "gridHasBtn"
});

Ext.define('menuList', {
extend: 'Ext.data.Model',
fields: ['name', 'value']
});

//The Store contains the AjaxProxy as an inline configuration
var comboStore = Ext.create('Ext.data.Store', {
model: 'menuList',
proxy: {
type: 'ajax',
url : '/SystemManage/GetComboMenuList?type=<%=Guid.Empty %>'
},
autoLoad: true
});

Ext.define('childMenuList', {
extend: 'Ext.data.Model',
fields: ['name', 'value']
});
//The Store contains the AjaxProxy as an inline configuration
var childComboStore = Ext.create('Ext.data.Store', {
model: 'childMenuList',
proxy:{
type: 'ajax',
url : '/SystemManage/GetComboMenuList'
},
reader: {
type: 'json'
},
autoLoad: false
});

Ext.create('Ext.form.Panel', {
title: '菜单编辑',
id:'editMenuForm',
bodyPadding: 5,
// The form will submit an AJAX request to this URL when submitted
url: '/SystemManage/SaveMenuForm',
method: 'POST',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
name: 'menuGuid',
id:'menuGuid',
xtype:'hiddenfield'
},{
fieldLabel: '菜单名称',
name: 'menuName',
id:'menuName',
allowBlank: false
}, {
fieldLabel: '菜单地址',
id:'menuUrl',
name: 'menuUrl',
// allowBlank: false
}, {
id: 'remark1',
name: 'remark1',
fieldLabel: '排序ASC',
allowBlank: false
},{
id:'menuList',
name: 'menuList',
xtype: 'combo',
allowBlank: false,
fieldLabel: '父菜单',
labelSeparator: ':',
multiSelect: false,
valueField: 'sm_guid', //'dictdataCode', 
displayField: 'sm_name', //'dictdataName', 
store: comboStore,
//typeAhead : true, 
mode: 'local', // default: remote 
triggerAction: 'all',
emptyText: '请选择父菜单',
readOnly: false,
editable : false, 
selectOnFocus :true,
anchor: '50%',
listeners: {
change:function(combo,record,index){
Ext.getCmp('childMenuList').reset();
childComboStore.load({ 
params: {type:Ext.getCmp("menuList").value},
callback: function(records, options, success){
if(records.length>0&&records[0].data.fatherGuid!='<%=Guid.Empty %>')
Ext.getCmp("childMenuList").setHidden(false);
else{
Ext.getCmp("childMenuList").setHidden(true);
}
}, 
scope: this 
}); 
}
}
}, {
id:'childMenuList',
name: 'childMenuList',
fieldLabel: '子菜单',
hidden:true,
labelStyle:'color:white;',
xtype: 'combo',
allowBlank: true,
labelSeparator: ':',
multiSelect: false,
valueField: 'sm_guid', //'dictdataCode', 
displayField: 'sm_name', //'dictdataName', 
store: childComboStore,
mode: 'local', // default: remote 
queryMode: 'local', //可以阻止第一次展开combo 的查询事件
triggerAction: 'all',
emptyText: '请选择子菜单',
anchor: '50%',
readOnly: false,
editable : false
},{
id: 'remark2',
name: 'remark2',
fieldLabel: '最高管理员可见',
anchor: '40%',
allowBlank: false
}],
buttonAlign:"left",
buttons: [{
text: '新增',
id:"btnSumbit",
formBind: true, //only enabled once the form is valid
disabled: true,
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function (form, action) {
Ext.Msg.alert('提示','操作成功!');
menuStore.reload();
},
failure: function (form, action) {
Ext.Msg.alert('提示', '操作失败!' + action.result.message);
ReturnFailJsonResult(action.result);
}
});
}
}
},{
text: '重置',
handler: function () {
this.up('form').getForm().reset();
Ext.getCmp('btnSumbit').setText("新增");
}
}],
renderTo: "gridForm"
});
});

关键点: 属性 queryMode: 'local', 默认的comboBox第一次展开会触发服务器查询,该属性 是本地缓存 不会去服务器拿