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 {//接收IDprivate 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;}}

效果图：