Ext二级联动下拉框

最新推荐文章于 2020-12-25 17:57:08 发布

最新推荐文章于 2020-12-25 17:57:08 发布 · 233 阅读

标签

#EXT

收录于

本文介绍如何使用ExtJS实现ComboBox的二级联动效果。通过监听第一个ComboBox的选择事件来动态加载第二个ComboBox的数据源，根据不同选择显示相应的选项。此方法适用于需要根据前一级选择动态更新下拉列表的场景。


combobox的二级联动实现：
 {
xtype : 'combo',
id : 'combo1',
emptyText : '请选择...',
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
store : store1,
valueField : 'value',
displayField : 'displayText',
width : 80,
editable : false,
listeners : {
select : function(combo, record, index) {
if (index == 0) {//
    combo2.setDisabled(true);
    combo2.clearValue();//
} else {
    combo2.setDisabled(false);
if (index == 1) {//
    combo2.clearValue();
    combo2.store.loadData([week);
} else {//
    combo2.clearValue();
    combo2.store.loadData(month);;
}
}
}
}, {
xtype : 'combo',
id : 'combo2',
emptyText : '请选择...',
typeAhead : true,
triggerAction : 'all',
lazyRender : true,
mode : 'local',
store : new Ext.data.SimpleStore(
{
data : [],
fields : ['value', 'displayText']
}),
valueField : 'value',
displayField : 'displayText',
width : 80,
editable : false,
disabled : true
}