Ext ComboBox两级联动

var resultOrderTpl = new Ext.Template( 
        '<div class="search-item-comboBox">','{orderNo} -{customerName}','</div>' 
); 
    
var dsOrder = new Ext.data.Store({ 
	proxy: new Ext.data.ScriptTagProxy({ 
		url: CONTEXT_PATH+'/order/orderLiveSearch.action' 
	}), 
	reader: new Ext.data.JsonReader({ 
			root: 'gridRows', 
			totalProperty: 'totalCount', 
			id: 'id' 
	}, [ 
			{name: 'id', mapping: 'id'}, 
			{name: 'orderNo', mapping: 'orderNo'}, 
			{name: 'customerName',mapping: 'customerName'} 
	]) 
}); 

var orderCmb = new Ext.form.ComboBox({ 
	fieldLabel:'合同号', 
	emptyText : '合同号检索(必输项)', 
	store: dsOrder, 
	displayField:'orderNo', 
	valueField: 'id', 
	typeAhead: false, 
	tpl: resultOrderTpl,         
	hiddenName:'orderId', 
	pageSize:10, 
	loadingText: 'loading...', 
	width: 220, 
	hideTrigger:true, 
    allowBlank:false, 
    minChars:1, 
    forceSelection:true, 
    triggerAction: 'all' 
}); 

var selReader = new Ext.data.JsonReader({ 
	id: 'id', 
	root:'gridRows' 
	}, [ 
		{name: 'id', mapping: 'id'}, 
		{name: 'styleNo', mapping: 'styleNo'}, 
		{name: 'description', mapping: 'description'} 
]); 
     
//款式 
var styleDs = new Ext.data.Store({ 
	proxy: new Ext.data.HttpProxy({ 
		url: CONTEXT_PATH+'/res/styleAll.action' 
	}), 
	reader: selReader 
}); 
var resultStyleTpl = new Ext.Template( 
        '<div class="search-item-comboBox">', 
            '{styleNo} -{description}', 
        '</div>' 
); 
    
var styleCmb = new Ext.form.ComboBox({ 
	id:'styleCmbId', 
	fieldLabel: '款式号', 
	store: styleDs, 
	emptyText : '根据合同号选择款式(必输项)', 
	allowBlank:false, 
	hiddenName:'styleId', 
	loadingText: 'searching...', 
	displayField : 'styleNo', 
	mode:'local', 
	tpl: resultStyleTpl, 
	editable : false, 
	valueField: 'id', 
	width: 220, 
	triggerAction: 'all' 
}); 

orderCmb.on('select', function () { 
	styleCmb.reset(); 
	styleDs.proxy = new Ext.data.HttpProxy({ 
		url:CONTEXT_PATH+'/res/styleAll.action?orderId='+orderCmb.getValue() 
	}); 
	styleDs.reload(); 
}); 
	this.orderCmb = orderCmb; 
	this.styleCmb = styleCmb; 

 

 

{
		            xtype:'fieldset',
		            title: '选择商品主类',
		            defaultType: 'textfield',
		          	items:[{
		          		xtype:'combo',
		          		id:'ComboMainMerchandiseSortId', 
		          		fieldLabel: '商品分类',
					    name:'name',//name只是改下拉的名称 
					    hiddenName:'mainMerchandiseSortId',//提交到后台的input的name 
					    width:190, 
					    store:new Ext.data.JsonStore({ 
							url:'merchandiseManager/AJAXDofindAllMainMerchandiseSort.action' ,
							autoLoad:true ,
							//totalProperty: "totalsize" ,
							root:"root" ,
							fields:['name','value'] 
						}),//填充数据 
					    emptyText : '请选择', 
					    mode : 'local',//数据模式,local代表本地数据 
					    readOnly : true,//是否只读 
					    triggerAction : 'all',// 显示所有下列数据,一定要设置属性triggerAction为all 
					    allowBlank : false,//不允许为空 
					    valueField : 'value',//值 
					    displayField : 'name',//显示文本 
					    editable: false,//是否允许输入 
					    forceSelection: true,//必须选择一个选项 
					    blankText:'请选择',//该项如果没有选择,则提示错误信息
					    listeners:{
					    	select:function(){
								var mainMerchandiseId=Ext.get("mainMerchandiseSortId").getValue(); //获取id为combo的值
								var combo=Ext.getCmp('ComboMerchandiseSortId');
								
								var store=new Ext.data.JsonStore({ 
									url:'merchandiseManager/AJAXDofindAllByMainMerchandiseSortId.action' ,
									autoLoad:true ,
									root:"root" ,
									fields:['name','value'],
									baseParams:{mainMerchandiseId: mainMerchandiseId}
								});
								combo.store=store;
								combo.reload();    
							}
						}
					     
            		}]
		        },{
		            xtype:'fieldset',
		            title: '选择商品分类',
		            defaultType: 'textfield',
		            items:[{
		          		xtype:'combo',
		          		id:'ComboMerchandiseSortId',
            				hiddenName:'merchandiseSortId',
				fieldLabel:'商品子分类',
	            			displayField:'name',
	            			valueField:'value',
	            			typeAhead: true,
	            			mode: 'local',
	            			triggerAction: 'all',
	            			emptyText:'请选择',
	            			selectOnFocus:true,
	            			width:190
            			}]
		        }

 

 


Ext ComboBox两级联动
 

你可能感兴趣的:(ext)