Extjs的comboBox的级联显示

最新推荐文章于 2019-04-10 10:04:12 发布

玉&心

最新推荐文章于 2019-04-10 10:04:12 发布

阅读量170

点赞数

分类专栏： EXTJS JAVA 文章标签： extjs

本文链接：https://blog.csdn.net/XinhuaShuDiao/article/details/84714085

版权

JAVA 同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

EXTJS

7 篇文章 0 订阅

订阅专栏

在Extjs中在form中利用comboBox来做级联操作是非常常见的一种操作,但是在Extjs中并不是用的原始html的select方法，而是使用的input进行控制。在这里完成了一个comboBox的级联显示代码.使用的是extjs3.2版本。

java代码：

action类:

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

public class FunctionListAction {

public void cascadeCombo(){

String province = "[['重庆','重庆'],['四川','四川']]";

String citySiChuan = "[['成都','成都'],['乐山','乐山'],['绵阳','绵阳'],['广安','广安']]";

String cityChongQing = "[['长寿','长寿'],['渝北','渝北'],['江北','江北'],['南坪','南坪']]";

String countyChengDu = "[['锦江区','锦江区'],['武侯区','武侯区'],['青羊区','青羊区'],['高新区','高新区'],['成华区','成华区'],['金牛区','金牛区']]";

String countryUnknow = "[['不知道','不知道']]";

HttpServletRequest request = ServletActionContext.getRequest();

String type = request.getParameter("type");//获取操作的选择框参数

HttpServletResponse response = ServletActionContext.getResponse();

response.setCharacterEncoding("utf-8");

try{

if("province".equals(type)){

response.getWriter().print(province);

}else if("city".equals(type)){

String prov = request.getParameter("id");

if("重庆".equals(prov)){

response.getWriter().print(cityChongQing);

}else if("四川".equals(prov)){

response.getWriter().print(citySiChuan);

}

}else if("county".equals(type)){

String city = request.getParameter("id");

if("成都".equals(city)){

response.getWriter().print(countyChengDu);

}else{

response.getWriter().print(countryUnknow);

}

}

}catch (IOException e) {

e.printStackTrace();

}

}

}

jsp文件:

<html>

<head>

<script type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">

<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="./ext/ext-all.js"></script>

<script type="text/javascript" src="./js/combo.js"></script>

<link rel="stylesheet" type="text/css" href="./css/menu.css">

</head>

<body>

<div id="container">

<input id="province" type="text" />

<input id="city" type="text" />

<input id="country" type="text" />

</div>

</body>

</html>

js文件：

Ext.onReady(function(){

var comboProvince = new Ext.form.ComboBox({

store:storeProvince,

applyTo:'province',

emptyText:'请选择省份',

mode:'local',

//mode:'remote',//点击下拉时加载

editable:false,//不能手输

triggerAction:'all',

valueField:'value',

displayField:'text'

});

storeProvince.load();//立即加载

comboProvince.on('select',function(combox){

var value = combox.getValue();

storeCity.load({params:{id:value}});

});

var comboCity = new Ext.form.ComboBox({

store:storeCity,

applyTo:'city',

emptyText:'请选择城市',

mode:'local',

editable:false,//不能手输

triggerAction:'all',

valueField:'value',

displayField:'text'

});

comboCity.on('select',function(combox){

var value = combox.getValue();

storeCounty.load({params:{id:value}});

});

var comboCounty = new Ext.form.ComboBox({

store:storeCounty,

applyTo:'country',

emptyText:'请选择区县',

mode:'local',

editable:false,//不能手输

triggerAction:'all',

valueField:'value',

displayField:'text'

});

comboCounty.on('select',function(combox){

alert(comboProvince.getValue()+'-'+comboCity.getValue()+'-'+comboCounty.getValue());

});

});

structs.xml配置文件

<package name="struts2" namespace="/" extends="struts-default">

<action name="function_*" class="com.test.action.FunctionListAction" method="{1}"></action>

</package>

截图如下：
[img]http://c.hiphotos.bdimg.com/album/pic/item/cc11728b4710b9120a9ac67ec2fdfc03934522d2.jpg[/img]