EXT 实现省份--城市--地区--级连
在实现级连的时候,我把所有的数据一次性的存来前台,你再去改天一个省份或一个城市的时就不用再去访问服务器了,
将低了,服务器的压力,
在本人的博客上有三个省份,城市,地区的,所有数据
本人将它解成字符串,然后比后台定义成字符串,直接发到前台来,
减少服务器的读取数据的时间,
解析后的数据如下面:
http://dl.iteye.com/upload/attachment/201168/89711136-4b36-3185-a7a3-0be11a99b043.jpg
把这一些数据发到前台时就把它实例到对象就可以了。呵
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'}]});}});
http://dl.iteye.com/upload/attachment/201184/897be0ec-29c8-3f29-a79f-4492107acd60.jpg
这上面就是实现了本地数据化的级连。呵呵希望对你有帮助了。呵呵
页:
[1]