Extjs的comboBox的级联显示
在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>
截图如下：
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>
截图如下：