只是做了个小例子,数据是写死在Action里面的
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' } ] } ) } )
后台Java 代码,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 Listsheng; private Listshi; private Listqu; public String sheng(){ City c1 = new City(100,"北京"); City c2 = new City(200,"山东"); sheng = new ArrayList(); 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(); shi.add(c1); shi.add(c2); }else if(paramId.equals("200")){ City c1 = new City(210, "济南市"); City c2 = new City(220, "滨州市"); shi = new ArrayList(); 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(); qu.add(c1); qu.add(c2); }else if(paramId.equals("120")){ City c1 = new City(121, "密云县"); City c2 = new City(122, "房山县"); qu = new ArrayList(); qu.add(c1); qu.add(c2); }else if(paramId.equals("210")){ City c1 = new City(211, "商河"); City c2 = new City(212, "章丘"); qu = new ArrayList(); qu.add(c1); qu.add(c2); }else if(paramId.equals("220")){ City c1 = new City(221, "沾化"); City c2 = new City(222, "惠民"); qu = new ArrayList(); qu.add(c1); qu.add(c2); } return SUCCESS; } public ListgetSheng() { return sheng; } public void setSheng(Listsheng) { this.sheng = sheng; } public String getParamId() { return paramId; } public void setParamId(String paramId) { this.paramId = paramId; } public ListgetShi() { return shi; } public void setShi(Listshi) { this.shi = shi; } public ListgetQu() { return qu; } public void setQu(Listqu) { this.qu = qu; } }