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>

二、   创建ComboBox 绑定数据源到ComboBox 

<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分别进入各自的流程。