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；
