html：
<html>
<head>
<title>Combobox三級聯動的實例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="ext-all.css">
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="jimmy.js"></script>
<style>
.center{
width:800px;
height:400px;
border:3px solid#FF1493;
margin:10px auto;
}
</style>
</head>
<body>
<div class="center">
<br /><br /><br />
<h3>我愛我家鄉---安徽安慶</h3>
<br />
<p>
安慶市：<br/>
位於長江中下游北岸， 皖鄂贛三省交界處，東與安徽省池州市、銅陵市隔江相望，南以長江與江西省九江市相連，西界湖北省黃梅、蘄春、英山三縣，<br/>
北接安徽省六安市、巢湖市。<br/>
安慶市轄區面積1.54萬平方公里，現轄一市七縣三區，即桐城市，懷寧、樅陽、潛山、太湖、宿松、望江、嶽西七個縣和迎江、大觀、宜秀區三個區，<br/>
總人口610萬人，其中市區７２．７萬人。 <br/>
</p>
<br /><br /><br />
<div style="text-align:center;">
<div id="comboProvince"></div>
<div id="comboCity"></div>
<div id="comboCounty"></div>
<div id="comboTown"></div>
</div>
</div>
</body>
</html>
js：
Ext.require(['Ext.form.*', 'Ext.data.*']);
/**
*分三步走：【1，提供數據】
* 【2，導入到store】
* 【3，把store託付給comboBox的store】
*/
Ext.onReady(function(){
var dataCityHebei = [
['唐山','唐山'],
['秦皇島','秦皇島'],
['承德','承德'],
['張家口','張家口']
];
var dataCityNeimenggu = [
['安慶市','安慶市'],
['合肥市','合肥市'],
['淮北市','淮北市'],
['淮南市','淮南市'],
['亳州市','亳州市'],
['宿州市','宿州市'],
['蚌埠市','蚌埠市'],
['滁州市','滁州市'],
['六安市','六安市'],
['銅陵市','銅陵市'],
['蕪湖市','蕪湖市'],
['宣城市','宣城市'],
['馬鞍山市','馬鞍山市'],
['池州市','池州市'],
['黃山市','黃山市'],
['蕪湖市','蕪湖市']
];
// 其中：遵化、遷安爲縣級市。
var dataCountyTangshan = [
['桐城市','桐城市'],
['望江縣','望江縣'],
['樅陽縣','樅陽縣'],
['宿松縣','宿松縣'],
['太湖縣','太湖縣'],
['嶽西縣','嶽西縣'],
['潛山縣','潛山縣'],
['懷寧縣','懷寧縣']
];
var dataTownNeimenggu = [
['長嶺鎮','長嶺鎮'],
['sssss','sssss']
];
var dataCountyUnknow = [
['可添加','可添加']
];
// 省數據源
var storeProvince = Ext.create('Ext.data.Store', {
fields: ['value', 'text'],
data:[
{value:'河北',text:'河北'},
{value:'安徽省',text:'安徽省'},
],
autoLoad : true
});
// 市數據源
var storeCity = Ext.create('Ext.data.Store', {
fields: ['value', 'text'],
data:[],
autoLoad : true
});
// 縣數據源
var storeCounty = Ext.create('Ext.data.Store', {
fields: ['value', 'text'],
data:[],
autoLoad : true
});
//鎮級數據
var storeTown = Ext.create('Ext.data.Store', {
fields: ['value', 'text'],
data:[],
autoLoad : true
});
var comboProvince =Ext.create('Ext.form.ComboBox', {
emptyText:"請選擇",
store : storeProvince,
queryMode : 'local',
triggerAction: 'all',
valueField: 'value', //value值字段
displayField: 'text', //顯示文本字段
renderTo: 'comboProvince',
listeners: { // 監聽選擇事件
select: function() {
storeCity.removeAll();
if (this.getValue() == '河北') {
storeCity.loadData(dataCityHebei,true);
} else if (this.getValue() == '安徽省') {
storeCity.loadData(dataCityNeimenggu,true);
}else if(this.getValue() == 'ssss') {
storeCity.loadData(dataCityNeimenggu,true);
}
}
}
});
var comboCity =Ext.create('Ext.form.ComboBox', {
emptyText:"請選擇",
store : storeCity,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
renderTo: 'comboCity',
listeners: {
select: function() {
if (this.getValue() == '安慶市') {
storeCounty.loadData(dataCountyTangshan);
} else {
storeCounty.loadData(dataCountyUnknow);
}
}
}
});
var comboCounty =Ext.create('Ext.form.ComboBox', {
emptyText:"請選擇",
store : storeCounty,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
renderTo: 'comboCounty',
listeners: {
select: function() {
if (this.getValue() == '望江縣') {
storeCounty.loadData(dataCountyTangshan);
} else {
storeTown.loadData(dataTownNeimenggu,true);
}
}
}
});
var comboTown =Ext.create('Ext.form.ComboBox', {
emptyText:"請選擇",
store : storeTown,
mode: 'local',
triggerAction: 'all',
valueField: 'value',
displayField: 'text',
renderTo: 'comboTown',
listeners: {
select: function() {
alert(comboProvince.getValue() + '-' + comboCity.getValue() + '-' + comboCounty.getValue() + '-' + comboTown.getValue());
}
}
});
});
有一bug：如安徽省，河北，，我想點出安慶市，，那麼我得先點擊河北，再點擊河北的下一聯動，不會出現任何內容，這時候再點擊上一級點擊安徽省，再點擊下一級纔會出現選項，，，，想再點擊下一級，在市級選項裏面重複一樣的操作(不需要點擊省級哦！)
--------555,有高手能夠解決這個bug的請指教，謝謝。