Extjs4---combobox省市区三级联动+struts2
CityAction.java
效果图:
只是做了个小例子,数据是写死在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;
}
}
效果图: