ExtJS4.2 二级下拉框联动

图片

 	//定义学历下拉框模型
	Ext.define('comModel', {
		extend : 'Ext.data.Model',
		fields : [
			{name : "code", type : 'String'},
			{name : "value", type : 'String'}
		]
	});

	//定义一级下拉框数据源
	var depStore = Ext.create('Ext.data.Store', {
		model : 'comModel',
		autoLoad : false,
		proxy : {
			type : 'ajax',
			url : 'employee_getCom.action?type=2',
			reader : {
				type : 'json',
				root : 'com_data'  //接收后台返回数据
			}
		}
	});
	//定义二级下拉框数据源
	var posStore = Ext.create('Ext.data.Store', {
		model : 'comModel',
		autoLoad : false,
		proxy : {
			type : 'ajax',
			url : 'employee_getCom.action?type=3',
			reader : {
				type : 'json',
				root : 'com_data'  //接收后台返回数据
			}
		}
	});

 

//创建表单
	var gform = Ext.create('Ext.form.Panel', {
		layout : 'form',
		width : 500,
		height : 800,
		frame : true,
		labelAlign : 'right',
		reader : reader,
		items : [{
			layout : 'column',
			baseCls : 'my-panel-no-border',
			items:[{
				columnWidth : .48,
				layout : 'form',
				baseCls : 'my-panel-no-border',
	        	items  : [{
	        		labelWidth : 50,
	        		name : 'department',
	        		id : 'department',
	        		store : depStore,
	        		mode : 'local',
	        		xtype : 'combo',
	        		fieldLabel:'部门',
	        		labelAlign : 'right',
	        		valueField : 'code',
	        		displayField : 'value',
	        		emptyText:'--请选择--',
	    			selectOnFocus:true,
	    			forceSelection : true,
	    			allowBlank : false,
	    			triggerAction: 'all',
	    			listeners : {
	    				select : function(combo, record, index) {
	    					posStore.on('beforeload', function(store, options){
								var new_params = {  //传参，获取二级下拉框数据
									depId : combo.value,
									t : 3
								};
								Ext.apply(posStore.proxy.extraParams, new_params);
							});
							posStore.load();
	    					
	    				}
	    			}
	        	}]
	        },{
	        	columnWidth : .48,
				layout : 'form',
				baseCls : 'my-panel-no-border',
	        	items  : [{
	        		labelWidth : 50,
	        		name : 'post',
	        		id : 'post',
	        		store : posStore,
	        		mode : 'local',
	        		xtype : 'combo',
	        		fieldLabel:'岗位',
	        		labelAlign : 'right',
	        		valueField : 'code',
	        		displayField : 'value',
	        		emptyText:'--请选择--',
	    			selectOnFocus:true,
	    			forceSelection : true,
	    			allowBlank : false,
	    			triggerAction: 'all'
	        	}]
	        }]
	});