Extjs4 combobox省市区三级联动 struts2

只是做了个小例子,数据是写死在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;  
    }  
}

 

发表评论