extjs三级联动的问题?

发布网友发布时间：2022-04-30 01:40

共1个回答

热心网友时间：2022-04-24 20:52

4.4.7. 露一小手，组合上面所知，省市县*级联。哈哈~
这是一个相当典型的案例，以前经常用select做，现在用comboBox实现的效果又会如何呢？

4.4.7.1. 先做一个模拟的，所有数据都在本地

思路是这样的，我们先准备好省市县的数据，都是二维数组，级联的数据就从它们之中选择。
var dataProvince = [
['河北','河北'],
['内蒙古','内蒙古']
];
var dataCityHebei = [
['唐山','唐山'],
['秦皇岛','秦皇岛'],
['承德','承德'],
['张家口','张家口']
];
var dataCityNeimenggu = [
['呼和浩特','呼和浩特'],
['包头','包头']
];
// 其中：遵化、迁安为县级市。
var dataCountyTangshan = [
['路南区','路南区'],
['路北区','路北区'],
['开平区','开平区'],
['古冶区','古冶区'],
['丰润区','丰润区'],
['丰南区','丰南区'],
['玉田','玉田'],
['遵化','遵化'],
['迁西','迁西'],
['迁安','迁安'],
['滦县','滦县'],
['滦南','滦南'],
['乐亭','乐亭'],
['唐海','唐海']
];
var dataCountyUnknow = [
['不知道','不知道']
];

然后我们要三个数据转换器，对应着省市县的三个Ext.data.SimpleData，原始数据经过它们的处理才可以交给comboBox，显示出我们期望的效果来。
var storeProvince = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: dataProvince
});
var storeCity = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: []
});
var storeCounty = new Ext.data.SimpleStore({
fields: ['value', 'text'],
data: []
});

注意到没有？只有storeProvince对应上了dataProvince，其他两个store里都用的空数组[]，这是因为没有选择省级地区之前，市级地区和县级地区是不应该有数据的。实际上你也不知道应该放什么，啥都没选呢。

现在可以制作三个comboBox了。这里我们提一句，每个combobox都配置成readOnly:true，这样省得用户输入无效信息，让triggerAction:all避免它去做autoComplete的判断。
var comboProvince = new Ext.form.ComboBox({
store: storeProvince,
emptyText: '请选择',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
readOnly: true
});
var comboCity = new Ext.form.ComboBox({
store: storeCity,
emptyText: '请选择',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
readOnly: true
});
var comboCounty = new Ext.form.ComboBox({
store: storeCounty,
emptyText: '请选择',
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
readOnly: true
});
comboProvince.applyTo('comboProvince');
comboCity.applyTo('comboCity');
comboCounty.applyTo('comboCounty');

在html里对应放上三个input，现在显示的部分就基本完成了。
<input id="comboProvince" type="text"/>
<input id="comboCity" type="text"/>
<input id="comboCounty" type="text"/>

现在我们来看关键部位，让三个comboBox关联起来，选择上级的时候，下级显示的信息要发生对应变化才可以。这就要用到我们上边说到的on('select')了。
comboProvince.on('select', function(comboBox){
var province = comboBox.getValue();
if (province == '河北') {
storeCity.loadData(dataCityHebei);
} else if (province == '内蒙古') {
storeCity.loadData(dataCityNeimenggu);
}
});
comboCity.on('select', function(comboBox){
var city = comboBox.getValue();
if (city == '唐山') {
storeCounty.loadData(dataCountyTangshan);
} else {
storeCounty.loadData(dataCountyUnknow);
}
});
comboCounty.on('select', function(comboBox){
alert(comboProvince.getValue() + '-' + comboCity.getValue() + '-' + comboCounty.getValue());
});

像这样，给三个comboBox都设置上on('select')的事件监听，在选择省的时候，判断选择的是哪一项，如果是河北，就在市级comboBox里显示河北省的信息。

注意我们用到的storeCity.loadData(dataCityHebei);，这可以改变store内部的数据，store的数据改变了，对应的comboBox也就发生了变化。省市都是如此操作，最后在选择县的时候用alert弹出选择的信息。

如此这般，这般如此，我们的省市县*级联就大功告成咯。庆贺下追问我是说的我的那个页面的那种形式应该如何实现*联动啊，这个列子我也从网上看到了，求解？

我是说的我的那个页面的那种形式应该如何实现*联动啊，所有数据都是动态的啊，这个列子我也从网上看到了，求解？