ExtJS：菜单ComboBox及级联菜单应用

标签：extjs   菜单   combobox   级联菜单   

首页一级菜单查询分组，二级菜单查询分组中的车辆信息。

定义分组数据模型：

Ext.define(
			‘group‘,
			{
				extend:‘Ext.data.Model‘,
				fields:[
				        {name:‘groupid‘,mapping:‘groupid‘,type:‘int‘},
				        {name:‘groupname‘,mapping:‘groupname‘,type:‘string‘}
				]
			}
		);

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‘}
				]
			}
		);

	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获取。

ExtJS：菜单ComboBox及级联菜单应用

标签：extjs   菜单   combobox   级联菜单   

原文地址：http://blog.csdn.net/undoner/article/details/42169161