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