extjs中的下拉框联动(springmvc)
最近在学习extjs4.2,学习到了下拉框联动的知识,这里记录一下。
目前存在的问题:需要频繁查询数据库,需要引入缓存来解决。目前还没有学会。
首先是前台:
JSP页面:
<body> <div id="city"></div> <div id="area"></div> </body>
JS代码:
Ext.onReady(function () { //先定义一个市的model Ext.define('City',{ extend:'Ext.data.Model', fields:[ {name:'cityid',type:'int'}, {name:'cityname',type:'string'} ] }); //定义区的model Ext.define('Area',{ extend:'Ext.data.Model', fields:[ {name:'areaid',type:'int'}, {name:'areaname',type:'string'} ] }); //市的数据中心 var cityStore=Ext.create('Ext.data.Store',{ //storeId:'simpsonsStore', model:'City', proxy:{ type:'ajax', url:'/extjsTest2/city/findCity', reader:{ type:'json', root:'city' } }, autoLoad:true }); //区的数据中心 var cityCode; var areaStore=Ext.create('Ext.data.Store',{ storeId:'areaStore', model:'Area', proxy:{ type:'ajax', url:'/extjsTest2/city/findAreaByCity', reader:{ type:'json', root:'area' } }, autoLoad:false }); //城市的下拉菜单 Ext.create("Ext.form.ComboBox",{ id:'cityCombo', fieldLabel:'城市', labelAlign:'right', store:cityStore, displayField: 'cityname', valueField:'cityid', listeners: { change: function(combo, nv, ov){ if(nv!=ov){ var areaCombo = Ext.getCmp("areaCombo"); areaCombo.clearValue(); var areaStore=areaCombo.getStore(); areaStore.load({ params:{cityid:this.value} }); } } } , renderTo:'city' }) //区的下拉菜单 Ext.create("Ext.form.ComboBox",{ id:'areaCombo', fieldLabel:'区域', labelAlign:'right', displayField:'areaname', valueField:'areaid', store:areaStore, renderTo:'area' }) });
后台代码,后台使用的是springmvc+spring+mybatis
@RequestMapping("city/findCity") @ResponseBody public Map<String, Object> findCity() { Map<String, Object> map = new HashMap<String, Object>(); List<City> list=cityService.findAllCity(); map.put("city", list); return map; } @RequestMapping("city/findAreaByCity") @ResponseBody public Map<String, Object> findAreaByCity(int cityid) { Map<String, Object> map = new HashMap<String, Object>(); List<Area> list= cityService.findAreaByCity(cityid); map.put("area", list); return map; }
数据库设计:
两个表
一个是city,字段为cityid,cityname,
比如
1,北京;
2,天津
一个是area,字段是areaid,areaname,cityid,
比如
1,朝阳区,1;
2,宣武区,1;
3,河东区,2;