Question

ExtJs 里 两个combobox 联动 选择完 第一个 第二个绑定相应数据 怎么做 要例子

Answer 1

Ext.onReady(function() {
Ext.QuickTips.init();
var provinces = [[1, '北京'], [2, '上海']];
var cities = new Array();
cities[1] = [[11, '海淀'], [22, '东城']];
cities[2] = [[33, '黄埔'], [44, '浦东'], [55, '静安']];
var comboProvinces = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ["provinceId", "provinceName"],
data : provinces
}),
listeners : {
select : function(combo, record, index) {
comboCities.clearValue();
comboCities.store
.loadData(cities[record.data.provinceId]);
}
},
valueField : "provinceId",
displayField : "provinceName",
mode : 'local',
forceSelection : true,
blankText : '请选择省份',
emptyText : '请选择省份',
hiddenName : 'provinceId',
editable : false,
triggerAction : 'all',
allowBlank : true,
fieldLabel : '请选择省份',
name : 'provinceId',
width : 80
});
var comboCities = new Ext.form.ComboBox({
store : new Ext.data.SimpleStore({
fields : ["cityId", 'cityName'],
data : []
}),
valueField : "cityId",
displayField : "cityName",
mode : 'local',
forceSelection : true,
blankText : '选择地区',
emptyText : '选择地区',
hiddenName : 'cityId',
editable : false,
triggerAction : 'all',
allowBlank : true,
fieldLabel : '选择地区',
name : 'cityId',
width : 80
});

var win = new Ext.Window({
width:500,
height:300,
layout:'fit',
border:false,
closable:false,
items:[{
xtype:'form',
frame:true,
labelWidth:100,
items : [comboProvinces, comboCities]
}]
});
win.show();
});