Question

extjs中一个combobox怎么完成二级联动

Answer 1

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// 数据源  
});