Extjs4 combobox静态本地数据实现省市联动

最简单的EXTjs4中带数据的combobox写法

xtype: 'combobox',
id :'fruit',
name: 'fruit',
editable:false,
store: [['0','苹果'],['1','鸭梨'],['2','香蕉']]，
mode: 'local',
labelAlign:'right',
fieldLabel: '选择水果',
editable:false

根据 store: [['0','苹果'],['1','鸭梨'],['2','香蕉']]   的数据格式 

由此设计数据如下，建议将

PCAP = []; //省份

PCAC = []; //地区

两个变量设置成getData()方法外的变量，以便一次性初始化后，不再需要重复对数据进行split,for循环等解析操作

代码如下

Ext.onReady(function(){
   //静态数据
   var localProvince =  getData(-1);  //省份数据优先初始化
   var localArea = []; //市区数据 由省份控制
   
   //定义combo
   var combo1 = Ext.create('Ext.form.field.ComboBox',{
       id :'combo1',
       name :'combo1',
       fieldLabel :'请选择省',
       store:localProvince,
       queryMode:'local',
       forceSelection: true,
       allowBlank:false,
       editable: false,
       emptyText:'请选择省',
       blankText : '请选择省',
       listeners:{
    	   change:function(combo, newValue, oldValue, eOpts){
    		 localArea = getData(newValue);
    		 combo2.setValue("");
    		 combo2.store.removeAll();
    		 combo2.store.insert(0, localArea );
    	   }
       }
   });

   var combo2 = Ext.create('Ext.form.field.ComboBox',{
       id :'combo2',
       name :'combo2',
       fieldLabel :'请选择市',
       store:localArea,
       queryMode:'local',
       forceSelection: true,
       allowBlank:false,
       editable: false,
       emptyText:'请选择市',
       blankText : '请选择市'
   });

   //容器
   var dataPanel = Ext.create('Ext.panel.Panel',{
       renderTo : Ext.getBody(),
       width : 400,
       height :300,
       title : 'Combo box 的简单使用，这里分别用基于内存和基于服务器的实现',
       plain :true,
       margin:'30 10 0 80',
       bodyStyle: "padding: 45px 15px 15px 15px;",
       defaults :{
           autoScroll: true,
           bodyPadding: 10
       },
       items:[combo1,combo2]
   });


   //省市数据应该比较全，如有缺失可以按照格式添加
  function getData(index){
	  	PCAD="北京市$东城区|西城区|崇文区|宣武区|朝阳区|海淀区|丰台区|门头沟区|房山县|大兴县|顷义县|平谷县|密云县|怀柔县|昌平县|延庆县|通县#天津市$和平区|河北区|河东区|河西区|南开区|红桥区|东丽区|西青区|津南区|北辰区|塘沽区|汉沽区|大港区|蓟县|宝坻县|武清县|静海县|宁河县#上海市$上海黄浦区|卢湾区|金山区|徐汇区|长宁区|静安区|普陀区|闸北区|虹口区|杨浦区|闵行区|宝山区|嘉定区|浦东新区|松江区|青浦区|南汇区|奉贤区|崇明区#重庆市$渝中区|大渡口区|江北区|沙坪坝区|九龙坡区|南岸区|北碚区|万盛区|双桥区|渝北区|巴南区|万州区|涪陵区|黔江区|长寿区|江津区|永川区|合川区|南川区|綦江县|潼南县|荣昌县|璧山县|大足县|铜梁县|梁平县|城口县|垫江县|武隆县|丰都县|奉节县|开县|云阳县|忠县|巫溪县|巫山县|石柱土家族自治县|秀山土家族苗族自治县|酉阳土家族苗族自治县|彭水苗族土家族自治县#辽宁$沈阳市|大连市|鞍山市|抚顺市|本溪市|丹东市|锦州市|葫芦岛市|营口市|盘锦市|阜新市|辽阳市|铁岭市|朝阳市|凌源市|北票市#吉林$长春市|吉林市|四平市|辽源市|通化市|白山市|延边朝鲜族自治州|白城市|松原市#黑龙江$哈尔滨市|齐齐哈尔市|鹤岗市|双鸭山市|鸡西市|大庆市|伊春市|牡丹江市|佳木斯市|台河市|黑河市|绥化市|大兴安岭地区#河北$石家庄市|唐山市|秦皇岛市|邯郸市|邢台市|保定市|张家口市|承德市|廊坊市|衡水市|沧州市#山西$太原市|大同市|阳泉市|长治市|晋城市|朔州市|晋中市|运城市|忻州市|临汾市|吕梁地区#河南$郑州市|开封市|洛阳市|平顶山市|焦作市|鹤壁市|新乡市|安阳市|濮阳市|许昌市|漯河市|三门峡市|南阳市|商丘市|信阳市|周口市|驻马店市|济源市#山东$济南市|青岛市|淄博市|枣庄市|东营市|潍坊市|烟台市|威海市|济宁市|泰安市|日照市|莱芜市|临沂市|德州市|聊城市|滨州市|菏泽市#江苏$南京市|徐州市|连云港市|淮安市|宿迁市|盐城市|扬州市|泰州市|南通市|镇江市|常州市|无锡市|苏州市#安徽$合肥市|芜湖市|蚌埠市|淮南市|马鞍山市|淮北市|铜陵市|安庆市|黄山市|滁州市|阜阳市|宿州市|巢湖市|六安市|亳州市|池州市|宣城市#江西$南昌市|萍乡市|九江市|新余市|鹰潭市|赣州市|吉安市|宜春市|抚州市|上饶市#浙江$杭州市|宁波市|温州市|嘉兴市|绍兴市|金华市|衢州市|舟山市|台州市|丽水市#福建$福州市|厦门市|三明市|莆田市|泉州市|漳州市|南平市|龙岩市|宁德市#广东$广州市|深圳市|珠海市|汕头市|韶关市|惠州市|河源市|梅州市|汕尾市|东莞市|中山市|江门市|佛山市|阳江市|湛江市|茂名市|肇庆市|清远市|潮州市|揭阳市|云浮市#海南$海口市|三亚市#贵州$贵阳市|六盘水市|遵义市|安顺市|铜仁地区|毕节地区|黔西南布依族苗族自治州|黔东南南苗族侗族自治州|黔南布依族苗族自治州#云南$昆明市|玉溪市|保山市|昭通市|思茅地区|临沧地区|丽江地区|文山壮族苗族自治州|红河哈尼族彝族自治州|西双版纳傣族自治州|楚雄彝族自治州|大理白族自治州|德宏傣族景颇族自治州|怒江傈僳族自治州|迪庆藏族自治州#四川$成都市|自贡市|攀枝花市|泸州市|德阳市|绵阳市|广元市|遂宁市|内江市|乐山市|南充市|宜宾市|广安市|达州市|眉山市|雅安市|巴中市|资阳市|阿坝藏族羌族自治州|甘孜藏族自治州|凉山彝族自治州#湖南$长沙市|株洲市|湘潭市|衡阳市|邵阳市|岳阳市|常德市|张家界市|益阳市|郴州市|永市|怀化市|娄底市|湘西土家族苗族自治州#湖北$武汉市|黄石市|襄樊市|十堰市|荆州市|宜昌市|荆门市|鄂州市|孝感市|黄冈市|咸宁市|随州市|恩施土家族苗族自治州|省直辖行政单位$仙桃市|天门市|潜江市|神农架林区#陕西$西安市|铜川市|宝鸡市|咸阳市|渭南市|延安市|汉中市|榆林市|安康市|商洛市#甘肃$兰州市|金昌市|白银市|天水市|嘉峪关市|武威市|张掖市|平凉市|酒泉市|庆阳市|定西地区|陇南地区|甘南藏族自治州|临夏回族自治州#青海$西宁市|海东地区|海北藏族自治州|黄南藏族自治州|海南藏族自治州|果洛藏族自治州|玉树藏族自治州|海西蒙古族藏族自治州#内蒙古自治区$呼和浩特市|包头市|乌海市|赤峰市|鄂尔多斯市|呼伦贝尔市|乌兰察布盟|锡林郭勒盟|巴彦淖尔盟|阿拉善盟|兴安盟#西藏自治区$拉萨市|昌都地区|山南地区|日喀则地区|阿里地区|林芝地区#新疆维吾尔自治区$乌鲁木齐市|克拉玛依市|吐鲁番地区|哈密地区|和田地区|阿克苏地区|喀什地区|克孜勒苏柯尔克孜自治州|巴音郭楞州|昌吉州|博尔塔拉州|伊犁哈萨克自治州|塔城地区|阿勒泰州|省直辖行政单位$石河子市|阿拉尔市|图木舒克市|五家渠市#广西壮族自治区$南宁市|柳州市|桂林市|梧州市|北海市|防城港市|钦州市|贵港市|玉林市|百色市|贺州市|河池市|来宾市|崇左市#宁夏回族自治区$银川市|石嘴山市|吴忠市|固原市#台湾省$台北市|高雄市|基隆市|台中市|台南市|新竹市|嘉义市台北县(板桥市)|宜兰县(宜兰市)|新竹县(竹北市)|桃园县(桃园市)|苗栗县(苗栗市)|台中县(丰原市)彰化县(彰化市)|南投县(南投市)|嘉义县(太保市)|云林县(斗六市)|台南县(新营市)|高雄县(凤山市)|屏东县(屏东市)|台东县(台东市)|花莲县(花莲市)|澎湖县(马公市)";
		PCAP = []; //省份
		PCAC = []; //地区
		PCAN = PCAD.split("#");
		for (i = 0; i < PCAN.length; i++) {
			TArea = PCAN[i].split("$")[1].split("|");
			PCAP[i] = PCAN[i].split("$")[0];
			PCAC[i] = TArea;
		}
		//alert(PCAP);
		//alert(PCAC);

		for (i = 0; i < PCAP.length; i++) {
			PCAP[i] = "['" + PCAP[i] + "','" + PCAP[i] + "']";
		}
		
		for (i = 0; i < PCAC.length; i++) {
			pcactemp = PCAC[i];
			for(j = 0; j < pcactemp.length; j++){
				pcactemp[j] = "['" + pcactemp[j] + "','" + pcactemp[j] + "']";
			}
			PCAC[i] = pcactemp;
		}
		
		if(index == '-1') return eval("["+PCAP+"]");  //获取省份
		index = "['" + index + "','" + index + "']";
		for(i = 0; i < PCAP.length; i++){  //获取省份对应的地区
			if(PCAP[i] == index) return eval("["+PCAC[i]+"]")
		}
		return "";
   }
 });