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