ExtJs combo的二级联动

二级联动主要是监听一级下拉框的取值，然后将该值作为二级下拉框请求数据时参数。下拉框和其对应的数据源都进行单独定义，如下：

// 商品类型
var goodsTypeStore = new Ext.data.Store({
	url: "goodsTypeAction!listGoodsType.action",
	reader: new Ext.data.JsonReader({
		idProperty : "typeId",
		root : "list"
	}, [{name : "id", mapping : "typeId"},
		{name : "name", mapping : "goodsName"}])
});
goodsTypeStore.load();
// 商品名
var goodsStore =  new Ext.data.Store({
	url: "goodsInfoAction!listGoodsByType.action",
	reader: new Ext.data.JsonReader({
		idProperty : "goodsId",
		root : "list"
	}, [{name : "id", mapping : "goodsId"},
		{name : "name", mapping : "goodsName"}])
});
// 第一级下拉框
var goodsTypeCombo = new Ext.form.ComboBox({
	width : 200,
	fieldLabel : "商品类型",
	name : "add_typeId",
	id: "add_typeId",
	emptyText: "请选择商品类型",
	mode: 'local',
	autoLoad: true,
	editable: false,
	allowBlank: false,
    	blankText:"不能为空",
	triggerAction: 'all',
	valueField: 'id',// 实际值
	displayField: 'name',// 显示值
	store: goodsTypeStore,// 数据源
	listeners: {// select监听函数
            select : function(combo, record, index){
            	goodsNameCombo.reset();
                goodsStore.load({
                	url: "goodsInfoAction!listGoodsByType.action",
                	params: {
                		typeId: combo.value
                	}
                });   
            }  
    	}
});
// 第二级下拉框
var goodsNameCombo = new Ext.form.ComboBox({
	width : 200,
	fieldLabel : "商品名",
	name : "add_goodsName",
	id: "add_goodsName",
	emptyText: "请选择商品类型",
	mode: 'local',
	autoLoad: true,
	editable: false,
	allowBlank: false,
	blankText:"不能为空",
	triggerAction: 'all',
	valueField: 'id',// 实际值
	displayField: 'name',// 显示值
	store: goodsStore// 数据源
});

定义好联动的下拉框后在form中定义该表单就可以了。

var importInfo_add_form = new Ext.form.FormPanel({
			autoHeight: true,
			autoWidth: true,
	        layout: 'form',
	        border: false,
	        frame: true,
	        items: [goodsTypeCombo, goodsNameCombo, {
			width : 200,
	        	xtype: 'numberfield',
	        	fieldLabel: '进货量',
	        	name: 'add_inCount',
	        	id: "add_inCount",
	        	allowBlank: false,
	        	blankText:"不能为空"
	        }, {
	        	width : 200,
	        	xtype: 'datefield',
	        	fieldLabel: '进货时间',
	        	name: 'add_time',
	        	id: "add_time",
	        	format: 'Y-m-d'
	        }, {
	        	width : 200,
	        	xtype: 'textfield',
	        	fieldLabel: '经手人',
	        	name: 'add_person',
	        	id: "add_person"
	        }, {
	        	width : 200,
	        	xtype: 'textfield',
	        	fieldLabel: '备注',
	        	name: 'add_note',
	        	id: "add_note"
	        }]
});