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；

posted @ 2017-02-24 19:35  sky流光  阅读(373)  评论(0)    收藏  举报