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", width: 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第一次展开会触发服务器查询,该属性 是本地缓存 不会去服务器拿

时间: 2024-10-25 13:54:11

ExtJS ComboBox之 2级联动的相关文章

jquery easyui Combobox 实现 两级联动

具体效果如下图: 关键代码: <tr> <td class="query-conditions-row_left" width="20%">科室:</td> <td> <input id="DepartmentId" style="width: 90%" panelHeight="150" class="easyui-combobox"

Combobox下拉框两级联动

下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科目两张表,每门科目都对应一个年级,所以我们可以用两个下拉框(Combobox)来存储年级和科目信息来供用户选择.界面如下: 这时如果我们将科目对应的下拉框直接绑定科目表时,用户选择一个年级后还要从所有科目中进行选择就会降低系统的友好性,甚至可能出现没有任何意义的查询语句.我们可以先绑定年级下拉框的数

Extjs combobox设置默认值

转载:http://www.54mask.com/extjs-combobox-default-value.html 相信很多人都遇到了在ExtJS框架中设置combo组件默认值的需求,ExtJS框架并没有提供现成的配置项或者方法来解决此问题,本人认为主要是因为此种需求的应用场景有限且很难达到适应于不同场景的实现. combo组件的设值其实很简单: 1 var getRecruitmentName = new Ext.data.JsonStore({ 2 url: '',--后台地址 3 bas

DropDownList绑定数据表实现两级联动示例

这篇文章主要介绍了DropDownList绑定数据表实现两级联动具体实现,需要的朋友可以参考下 场景一:平时我们在DropDownList控件下添加下拉选项时,都会使用它的Item.Add方法,直接在代码下添加.如果我们想添加或修改下拉选项,则必须去修改源代码.如果几个DropDownList控件的下拉选项相同,我们则需要重复添加好多次,后期的维护工作很不方便. 场景二:我们在12306网站买票时,肯定遇到过这么一种情景:我们需要先选定目的地的省份,选完省份后在城市选框中会自动加载该省份的城市,

故障管理系统--select两级联动查询

写故障管理系统时,根据主类-平台进行故障搜索,需要用到select两级联动查询 我前端技术纯菜鸟,请教了个水平高的同事才搞定,所以记录下来,以免以后再忘了 前端html <form id="tab" class="form-inline" role="form" action='/search/' method='GET' style="float:right;margin-top:-48px;margin-right:0px;&

NET:异步刷新,dropdownlist两级联动, Triggers

PS::我在论坛发了个求助帖子,居然没啥人回..好纠结啊... http://bbs.csdn.net/topics/390809330 目的:三个dropdownlist A  B   C,     要求实现  A  联动 C,   B 联动 C 涉及:ScriptManager .  UpdatePanel ,  Triggers,   AsyncPostBackTrigger ScriptManager 对象集:启用局部呈现 <asp:ScriptManager ID="Script

Devexpress TreeList选择父级联动

Treelist当显示复选框后,父级和子级的复选框没有关联,使用过程中很不便,如图所示 自己给treelist添加父子级联动 /// <summary> /// 初始化TreeList,父子节点选择关联 /// </summary> public class TreeListInitial { TreeList Tree; /// <summary> /// 初始化TreeList,父子节点选择关联 /// </summary> /// <param

n级联动下拉菜单组件

这是最近在写的一套前端库中的一个组件,支持n级联动的下拉菜单,在这里跟大家分享一下. 使用方法如下: <div id="test"> <p>省份:<select></select></p> <p>城市:<select></select></p> <p>商家:<select></select></p> </div> <

DropDownList控件:两级联动--【Asp.Net】

最近学习Asp.Net,发现很多控件都很有意思,例如:Canlender,AdRotator等.以前只知道有这样的页面效果,但是对这些控件了解并不多.不怕不知道,就怕不知道. DropDownList,两级联动,做这个demo的时候,让我又爱又恨. 一开始的时候,自己就草草的建立了一个Fresh的数据库,建立了一个Student表如下图所示: 在页面上面放了两个DropDownList,两个SqlDataSource.如下图所示: 下面就需要通过SqlDataSource设置数据源,让DropD