ExtJS 省、市、县级联示例
1.程序代码清单:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
var dataProvince = [
['河北', '河北'],
['内蒙古', '内蒙古']
];
var dataCityHebei = [
['唐山', '唐山'],
['秦皇岛', '秦皇岛'],
['承德', '承德'],
['张家口', '张家口']
];
var dataCityNeimenggu = [
['呼和浩特', '呼和浩特'],
['包头', '包头']
];
var dataCountyTangshan = [
['路南区', '路南区'],
['路北区', '路北区'],
['古治区', '古治区'],
['丰润区', '丰润区'],
['丰南区', '丰南区'],
['玉田', '玉田'],
['遵化', '遵化'],
['迁西', '迁西'],
['迁安', '迁安'],
['滦县', '滦县'],
['乐亭', '乐亭'],
['唐海', '唐海']
];
var dataCountUnknow = [
['不知道', '不知道']
];
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:[]
});
var comboProvince = new Ext.form.ComboBox({
store:storeProvince,
emptyText:'请选择省份',
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
fieldLabel:'请选择省份'
});
var comboCity = new Ext.form.ComboBox({
store:storeCity,
emptyText:'请选择城市',
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
fieldLabel:'请选择城市'
});
var comboCounty = new Ext.form.ComboBox({
store:storeCounty,
emptyText:'请选择县级',
mode:'local',
triggerAction:'all',
valueField:'value',
displayField:'text',
fieldLabel:'请选择县级'
});
var entity = function(province, city, county) {
this.province = province;
this.city = city;
this.county = county;
}
var en = new entity();
comboProvince.on('select', function(comboBox){
var province = comboBox.getValue();
en.province = province;
if (province == '河北') {
storeCity.loadData(dataCityHebei);
comboCity.clearValue();
comboCounty.clearValue();
} else if (province == '内蒙古') {
storeCity.loadData(dataCityNeimenggu);
comboCity.clearValue();
comboCounty.clearValue();
}
});
comboCity.on('select', function(comboBox) {
var city = comboBox.getValue();
en.city = city;
if (city == '唐山') {
storeCounty.loadData(dataCountyTangshan);
comboCounty.clearValue();
}else {
storeCounty.loadData(dataCountUnknow);
comboCounty.clearValue();
}
});
comboCounty.on('select', function(comboBox) {
var county = comboBox.getValue();
en.county = county;
Ext.Msg.alert('提示', en.province + '省' + en.city + '市' + en.county + '县');
});
Ext.onReady(function(){
var newCarForm=new Ext.FormPanel({
frame: true,
title: 'comboBox_Cascade',
bodyStyle: 'padding:5px',
renderTo:"combo",
width: 500,
items: [
comboProvince, comboCity,comboCounty
]
});
});
</script>
</head>
<body>
<div id="combo"></div>
</body>
</html>
2.效果截图: