首页 > 代码库 > 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级联动
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。