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 : '请选择查询的车辆'

	});