首页 > 代码库 > ExtJS ComboBox之 2级联动

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 configurationvar 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 configurationvar 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 submittedurl: /SystemManage/SaveMenuForm,method: POST,// Fields will be arranged vertically, stretched to full widthlayout: anchor,defaults: {anchor: 100%},// The fieldsdefaultType: 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 validdisabled: 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第一次展开会触发服务器查询,该属性 是本地缓存 不会去服务器拿

ExtJS ComboBox之 2级联动