Extjs4---combobox省市区三级联动+struts2

Extjs4---combobox省市区三级联动+struts2

只是做了个小例子，数据是写死在Action里面的

完整代码下载地址：http://download.csdn.net/detail/lc448986375/4578239

combobox.js代码：

Ext.onReady(
		function(){
			Ext.define(
				'model',
				{
					extend:'Ext.data.Model',
					fields:[
					        {name:'id',mapping:'id',type:'int'},
					        {name:'name',mapping:'name',type:'string'}
					]
				}
				
			);
			//加载省的数据
			var storeSheng = Ext.create(
				'Ext.data.Store',
				{
					model:'model',
					proxy:{
						type:'ajax',
						url:'city_sheng',
						reader:{
							type:'json',
							root:'sheng'
						}
					},
					autoLoad:true,
				    remoteSort:true						
				}
			);
			//加载市的数据
			var storeShi = Ext.create(
					'Ext.data.Store',
					{
						model:'model',
						proxy:{
							type:'ajax',
							url:'city_shi',
							reader:{
								type:'json',
								root:'shi'
							}
						},
						autoLoad: false,
					    remoteSort:true						
					}
			);
			//加载区的数据
			var storeQu = Ext.create(
					'Ext.data.Store',
					{
						model:'model',
						proxy:{
							type:'ajax',
							url:'city_qu',
							reader:{
								type:'json',
								root:'qu'
							}
						},
						autoLoad: false,
					    remoteSort:true
						
					}
			);
			
			Ext.create(
					'Ext.panel.Panel',
					{
						width:300,
						height:200,
						title:'三级联动',
						renderTo:Ext.getBody(),
						defaluts:{
							autoScroll:true
						},
						items:[
						       {
						    	   xtype:"combo", 
						    	   name:'sheng',
						    	   id:'sheng',
						    	   fieldLabel:'选择省',
						    	   displayField:'name',
						    	   valueField:'id',
						    	   store:storeSheng,
						    	   triggerAction:'all',
						    	   queryMode:'local',
						    	   selecOnFocus:true,
						    	   forceSelection:true,
						    	   allowBlank:false,
						    	   editable:true,
						    	   emptyText:'请选择省',
						    	   blankText:'请选择省',
						    	   listeners:{
						    		   select:function(combo,record,index){
						    			   try{
						    				   var shi = Ext.getCmp('shi');
							    			   var qu = Ext.getCmp('qu');
							    			   shi.clearValue();
							    			   qu.clearValue();
							    			   shi.store.load(
							    					{
							    						params:{
							    							paramId:combo.getValue()
							    						}
							    					}   
							    			   );
						    			   }catch(ex){
						    				   alert("数据加载失败！");
						    			   }
						    			   
						    		   }
						    	   }
						    	   
						       },{
						    	   xtype:"combo", 
						    	   name:'shi',
						    	   id:'shi',
						    	   fieldLabel:'选择市',
						    	   displayField:'name',
						    	   valueField:'id',
						    	   store:storeShi,
						    	   triggerAction:'all',
						    	   queryMode:'local',
						    	   selecOnFocus:true,
						    	   forceSelection:true,
						    	   allowBlank:false,
						    	   editable:true,
						    	   emptyText:'请选择市',
						    	   blankText:'请选择市',
						    	   listeners:{
						    		   select:function(combo,record,index){
						    			   try{
						    				   var qu = Ext.getCmp('qu');
							    			   qu.clearValue();
							    			   qu.store.load(
							    					{
							    						params:{
							    							paramId:combo.getValue()
							    						}
							    					}   
							    			   );
						    			   }catch(ex){
						    				   alert("加载数据失败！");
						    			   }
						    			   
						    		   }
						    	   }
						    	   
						       },{
						    	   xtype:'combo',
						    	   name:'qu',
						    	   id:'qu',
						    	   store:storeQu,
						    	   fieldLabel:'选择区',
						    	   emptyText:'请选择区',
						    	   allowBlank:false,
						    	   displayField:'name',
						    	   queryMode:'local'
						       }
						]
					}
			)
		}
)

CityAction.java

package action;

import java.util.ArrayList;
import java.util.List;

import model.City;

import com.opensymphony.xwork2.ActionSupport;

public class CityAction extends ActionSupport {
	//接收ID
	private String paramId;
	
	private List<City> sheng;
	private List<City> shi;
	private List<City> qu;
	
	public String sheng(){
		City c1 = new City(100,"北京");
		City c2 = new City(200,"山东");
		sheng = new ArrayList<City>();
		sheng.add(c1);
		sheng.add(c2);
		return SUCCESS;
	}
	public String shi(){
		if(paramId.equals("100")){
			City c1 = new City(110, "市辖区");
			City c2 = new City(120, "市辖县");
			shi = new ArrayList<City>();
			shi.add(c1);
			shi.add(c2);
		}else if(paramId.equals("200")){
			City c1 = new City(210, "济南市");
			City c2 = new City(220, "滨州市");
			shi = new ArrayList<City>();
			shi.add(c1);
			shi.add(c2);
		}
		
		return SUCCESS;
	}
	public String qu(){
		if(paramId.equals("110")){
			City c1 = new City(111, "朝阳区");
			City c2 = new City(112, "昌平区");
			qu = new ArrayList<City>();
			qu.add(c1);
			qu.add(c2);
		}else if(paramId.equals("120")){
			City c1 = new City(121, "密云县");
			City c2 = new City(122, "房山县");
			qu = new ArrayList<City>();
			qu.add(c1);
			qu.add(c2);
		}else if(paramId.equals("210")){
			City c1 = new City(211, "商河");
			City c2 = new City(212, "章丘");
			qu = new ArrayList<City>();
			qu.add(c1);
			qu.add(c2);
		}else if(paramId.equals("220")){
			City c1 = new City(221, "沾化");
			City c2 = new City(222, "惠民");
			qu = new ArrayList<City>();
			qu.add(c1);
			qu.add(c2);
		}
		return SUCCESS;
	}
	
	
	
	public List<City> getSheng() {
		return sheng;
	}
	public void setSheng(List<City> sheng) {
		this.sheng = sheng;
	}
	public String getParamId() {
		return paramId;
	}
	public void setParamId(String paramId) {
		this.paramId = paramId;
	}
	public List<City> getShi() {
		return shi;
	}
	public void setShi(List<City> shi) {
		this.shi = shi;
	}
	public List<City> getQu() {
		return qu;
	}
	public void setQu(List<City> qu) {
		this.qu = qu;
	}
}

效果图：