联动下拉菜单实例

联动下拉菜单核心代码的是线路combo监听器的实现,虽然看着少,但是花了我2天的时间,希望大家少走冤枉路!

// 所有线路的store
var lineNameComboBoxStore = new Ext.data.JsonStore({
url : context + '/equipment/findAllLine.action',
root : 'data',
autoLoad : true,
fields : [{
name : 'sno'
}, {
name : 'chineseName'
}]
});
// 所有车站的store
var stationNameComboBoxStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
method : 'Get',
url : context + '/equipment/findAllStation.action'
}),
reader : new Ext.data.JsonReader({
root : 'data'
}, [{
name : 'sno'
}, {
name : 'chineseName'
}])

});
// 显示车站名下拉框
var stationNameField = new Ext.form.ComboBox({
hiddenName : 'equipment.station.chineseName',
store : stationNameComboBoxStore,
emptyText : '请选择',
triggerAction : 'all',
valueField : 'chineseName',
displayField : 'chineseName',
mode : 'remote',
fieldLabel : '车站名称',
id : 'stationName',
allowBlank : true,
width : 120
});
// 显示线路名下拉框
var lineNameField = new Ext.form.ComboBox({
hiddenName : 'equipment.id.sno',
store : lineNameComboBoxStore,
emptyText : '请选择',
triggerAction : 'all',
valueField : 'sno',
displayField : 'chineseName',
mode : 'remote',
fieldLabel : '线路名称',
id : 'lineName',
allowBlank : true,
width : 120,
listeners : {
select : function(combo, record) {
stationNameField.store.proxy = new Ext.data.HttpProxy({
url : context
+ '/equipment/findAllStation.action?parentNo='
+ Ext.getCmp('lineName').getValue()
});
stationNameComboBoxStore.load();
}
}
});

猜你喜欢

转载自badmanisme.iteye.com/blog/1440019