Extjs的comboBox的级联显示 -

357029540

浏览: 732798 次
性别:
来自: 重庆

最近访客更多访客>>

韩毅Evan

heroqt

jis117

divver

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Extjs的comboBox的级联显示

博客分类：

EXTJS
JAVA

extjs

在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>

截图如下：

分享到：

Extjs的Window中加入Tree和Grid | Extjs中利用Menu和GridPanel生成一个Trig ...

2015-04-22 21:26
浏览 1046
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs的comboBox的级联显示

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Extjs的comboBox的级联显示

评论

发表评论

相关推荐

如何保证在Java多线程中的原子性操作？

Java内存模型简单介绍

java中线程挂起的几种方式

自定义线程池简单介绍

实现自己的spring boot starter

使用POI实现合并行的导入

Spring IOC设计原理解析

SpringBoot集成自定义HandlerMethodArgumentResolver参数初始值解析

关于spring cloud config加密EncryptionTooWeakException异常说明

gradle使用mybatis-generator生成user表相关文件只生成mysql..user的原因说明

SpringBoot+Activiti的serviceTask注入异常问题

16进制与字符串的互转及转换为byte数组

JVM学习总结

利用JavaFX创建一个可以订阅发布的MQTT客户端桌面程序

java8新特性time类相关介绍

java动态添加外部jar包到classpath

java 10进制转16进制带ox格式输出

SpringBoot+thymeleaf简单实现登陆注册及记账功能

Java 8的新特性—终极版

对\\uxx转换为unicode编码的\uxx

最近访客更多访客>>