Ext.form.ComboBox实现省、市、县级联

<span style="font-family: Arial, Helvetica, sans-serif; font-size: 13.3333339691162px; background-color: rgb(255, 255, 255);">	</span><span style="font-size:18px;font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"><strong>使用Ext.form.ComboBox和后台数据库数据Ajax实现省、市、县三级级联。</strong></span>

一、 创建store  远程加载数源

<span style="font-size:18px;">	//创建stroeProvince 省份的数据源
var stroeProvince= new Ext.data.Store({
proxy:{
type:'ajax',                            // Ajax方式获取数据
url:'GetRegionServlet?type=Province',   // /获取数据的路径
reader : {
type : 'json',                 //返回数据类型为json格式
root : 'Province'             //数据
}
},
fields :[{name:'ProID'},{name:'ProName'}]
});
//创建stroeCity 市的数据源
var stroeCity=new Ext.data.Store({
proxy:{
type:'ajax',
url:'GetRegionServlet?type=City',
reader : {
type : 'json',
root : 'City'}
},
fields :[{name:'CityID'},{name:'CityName'}]
});
//创建stroeDistrict 区、县的数据源
var stroeDistrict=new Ext.data.Store({
proxy:{
type:'ajax',
url:'GetRegionServlet?type=District',
reader : {
type : 'json',
root : 'District'}
},
fields :[{name:'Id'},{name:'DisName'}]
});</span>

<span style="font-size:18px;"><span style="white-space:pre">	</span>// 创建省份ComboBox
var comboProvince= new Ext.form.ComboBox({
store:stroeProvince,
emptyText:'请选择',     //默认项
mode:'local',           //数据请求方式
triggerAction: 'all',   //设置成'all' 避免ComboBox使用autoComplete的效果，让每次选择都可以查看到所有的数据
valueField: 'ProID',    //数据
displayField: 'ProName',//显示数据
editable: false,         //设置成false 避免用户输入无效信息
renderTo: 'comboProvince' //渲染的地方
});
var comboCity=new Ext.form.ComboBox({
store:stroeCity,
emptyText:'请选择',
mode:'local',
triggerAction: 'all',
valueField: 'CityID',
displayField: 'CityName',
editable: false,
renderTo: 'comboCity'
});
var comboDistrict=new Ext.form.ComboBox({
store:stroeDistrict,
emptyText:'请选择',
mode:'local',
triggerAction: 'all',
valueField: 'Id',
displayField: 'DisName',
editable: false,
renderTo: 'comboDistrict'
});</span>

<span style="font-weight: normal;"><span style="font-size:18px;">stroeProvince.load();
//下面代码给三个ComboBox都设置了on()的事件监听。  使用到stroe.proxy.url 这步操作就会改变store内部数据
//监听事件（远程）
comboProvince.on('select',function(comboBox){
var ProID=comboBox.getValue();
stroeCity.proxy.url='GetRegionServlet?type=City&ProID=' + encodeURIComponent(encodeURIComponent(ProID));
stroeCity.reload();
});
comboCity.on('select',function(comboBox){
var CityID=comboBox.getValue();
stroeDistrict.proxy.url='GetRegionServlet?type=District&CityID=' + encodeURIComponent(encodeURIComponent(CityID));
stroeDistrict.reload();
});
comboDistrict.on('select',function(comboBox){
alert(comboProvince.getRowValue()+'-'+comboCity.getRowValue()+'-'+comboDistrict.getRowValue());
});
//从上述代码可以看出，先执行stroeProvince.load();，将省份数据初始化。然后判断用户选择了省级信息的哪一项，
// 取得数据后再调用市级ComboBox的load()函数去后台读取数据</span></span>

需要注意的是，因为Ajax默认的使用UTF-8编码传输数据，所以需要把编码格式都换成UTF-8编码格式，否则会出现乱码。 后台的request和response都需要进行处理，统一使用UTF-8编码。

主程序体很简单，先获得type的值，进而判断后面要读取省、市、县的哪一部分信息，根据type分别进入各自的流程。