EXT 实现省份--城市--地区--级连

在实现级连的时候，我把所有的数据一次性的存来前台，

你再去改天一个省份或一个城市的时就不用再去访问服务器了，

将低了，服务器的压力，

 

在本人的博客上有三个省份，城市，地区的，所有数据

本人将它解成字符串，然后比后台定义成字符串，直接发到前台来，

减少服务器的读取数据的时间，

 

解析后的数据如下面：

 

 

 

 

把这一些数据发到前台时就把它实例到对象就可以了。呵

 

ext 代码如下：呵呵

 

Ext.Ajax.request({
	url: 'orderManager/AJAXDogetProvincesCitiesDistrictsData.action',
	success: function(response){
		var json = Ext.util.JSON.decode(response.responseText) ;
   			
		//城市
		var citiesDs= new Ext.data.SimpleStore({
			data: [],
			fields: ['value','name']
		});
   			
   		//地区
   		var districtsDs=new Ext.data.SimpleStore({
			data: [],
			fields: ['value','name']
		});

		var panel=new Ext.Panel({
			width:300,
			items:[{
				xtype:'combo',
				store :new Ext.data.SimpleStore({
					data: json.provinces,
					fields: ['value','name']
				}),
				triggerAction : 'all',// 显示所有下列数据，一定要设置属性triggerAction为all 
				fieldLabel: '请选择省份',
				allowBlank : false,//不允许为空 
				blankText:'请选择',
				valueField : 'value',//值 
				displayField : 'name',//显示文本 
				 readOnly : true,//是否只读
				emptyText : '请选择',
				editable: false,//是否允许输入 
				mode: 'local',
				listeners:{
					select:function(combo, record,index){
						citiesDs.loadData([],false);
						Ext.getCmp('citiesDsId').reset();
						districtsDs.loadData([],false);
						Ext.getCmp('districtsDsId').reset();
						citiesDs.loadData(eval("json.cities."+record.get('value')),false);
					}
				}
			},{
				xtype:'combo',
				id:'citiesDsId',
				store:citiesDs,
				triggerAction : 'all',// 显示所有下列数据，一定要设置属性triggerAction为all 
				fieldLabel: '请选择省份',
				allowBlank : false,//不允许为空 
				blankText:'请选择',
				valueField : 'value',//值 
				displayField : 'name',//显示文本 
				readOnly : true,//是否只读
				emptyText : '请选择',
				editable: false,//是否允许输入 
				mode: 'local',
				listeners:{
					select:function(combo, record,index){
						districtsDs.loadData([],false);
						Ext.getCmp('districtsDsId').reset();
						districtsDs.loadData(eval("json.districts."+record.get('value')),false);
					}
				}
			},{
				xtype:'combo',
				fieldLabel: '请选择地区',
				id:'districtsDsId',
				store:districtsDs,
				triggerAction : 'all',// 显示所有下列数据，一定要设置属性triggerAction为all 
				allowBlank : false,//不允许为空 
				blankText:'请选择',
				valueField : 'value',//值 
				displayField : 'name',//显示文本 
				readOnly : true,//是否只读
				emptyText : '请选择',
				editable: false,//是否允许输入 
				mode: 'local'
			}]
		});
	}
});

 

 

 

这上面就是实现了本地数据化的级连。呵呵希望对你有帮助了。呵呵

评论

1 楼 fyf_it 2013-03-27  

可是如果这样的省市区的级联要覆盖到全国怎么办？现在正在做这个，而且是android的、希望可以帮忙讨论下