ExtJS:菜单ComboBox及级联菜单应用
首页一级菜单查询分组,二级菜单查询分组中的车辆信息。
定义分组数据模型:
Ext.define( ‘group‘, { extend:‘Ext.data.Model‘, fields:[ {name:‘groupid‘,mapping:‘groupid‘,type:‘int‘}, {name:‘groupname‘,mapping:‘groupname‘,type:‘string‘} ] } );
定义分组groupStore:
var groupStore = Ext.create(‘Ext.data.Store‘, { model:‘group‘, proxy : { type:‘ajax‘, url : ‘group/getgroup‘ ,//请求url reader : ({ type:‘json‘, totalProperty: "totalAllGroup", //totalRecords属性由json.results得到 successProperty: true, //json数据中,保存是否返回成功的属性名 root: ‘dataOfAllGroup‘ , //构造元数据的数组由json.rows得到 //idProperty : "id" }), autoLoad:true, remoteSort:true }}); groupStore.load();//加载数据
定义分组ComboBox
var groupCombo = Ext.create(‘Ext.form.ComboBox‘, { id : ‘group‘, fieldLabel : ‘所属部门‘, labelSeparator : ‘:‘, labelWidth: 80, triggerAction : ‘all‘, store : groupStore, displayField : ‘groupname‘, valueField : ‘groupid‘, loadingText : ‘正在加载数据...‘, queryMode : ‘local‘, forceSelection : true, value: ‘‘, typeAhead : true, width: 240, allowBlank:false, margin: ‘3 5 3 10‘, emptyText : ‘请选择所属部门‘, listeners:{ //用于二级菜单,若是单菜单可注释掉该监听事件 select : function(combo, record,index){ Ext.getCmp(‘device‘).clearValue();//上级combo在select事件中清除下级的value Ext.getCmp(‘device‘).getStore().load({ url: ‘device/getdevice/‘ + combo.value, }); } } });
以上是单菜单的代码,添加二级菜单,参考下面:
定义车辆数据模型:
Ext.define( ‘model‘, { extend:‘Ext.data.Model‘, fields:[ {name:‘id‘,mapping:‘id‘,type:‘int‘}, {name:‘carno‘,mapping:‘carno‘,type:‘string‘} ] } );
定义车辆deviceStore:
var deviceStore = Ext.create(‘Ext.data.Store‘, { model:‘model‘, proxy : { type:‘ajax‘, url : ‘device/getdevice‘ , reader : ({ type:‘json‘, totalProperty: "totalAllDevice", //totalRecords属性由json.results得到 successProperty: true, //json数据中,保存是否返回成功的属性名 root: ‘dataOfAllDevice‘ , //构造元数据的数组由json.rows得到 //idProperty : "id" }), }});
定义车辆ComboBox
var deviceCombo = Ext.create(‘Ext.form.ComboBox‘, { id : ‘device‘, fieldLabel : ‘车牌号‘, labelSeparator : ‘:‘, labelWidth: 80, triggerAction : ‘all‘, store : deviceStore, displayField : ‘carno‘, valueField : ‘carno‘, loadingText : ‘正在加载数据...‘, queryMode : ‘local‘, forceSelection : true, value: ‘‘, typeAhead : true, width: 240, allowBlank:false, margin: ‘3 5 3 10‘, emptyText : ‘请选择查询的车辆‘ });
重点在于:queryMode : ‘local‘,如果不选择从本地获取数据源,则会重新去远程remote获取。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。