无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化，去动态加载其他下拉列表，如：省、市、地区。
当我们监听到省变化时，向service端发送省的编号，service端根据收到的"省"编号到数据库中查询该省所对应的市信息，
地区同理，抓住这一点，我们只需要监听 combobox 的 select 事件并在其中实现逻辑即可。
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
10 <!--ExtJs框架结束-->
11 <script type="text/javascript">
12 Ext.onReady(function () {
13 //初始化标签中的Ext:Qtip属性。
14 Ext.QuickTips.init();
15 Ext.form.Field.prototype.msgTarget = 'side';
16
17 //----------------------下拉列表开始----------------------//
18 //创建市数据源
19 var combocitystore = new Ext.data.Store({
20 //设定读取的地址
21 proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/City.ashx' }),
22 //设定读取的格式
23 reader: new Ext.data.JsonReader({ root: 'data' },
24 [{ name: 'id' }, { name: 'name'}])
25 });
26 //创建区数据源
27 var comboareastore = new Ext.data.Store({
28 //设定读取的地址
29 proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/Area.ashx' }),
30 reader: new Ext.data.JsonReader({ root: 'data' },
31 [{ name: 'id' }, { name: 'name'}])
32 });
33 //创建市Combobox
34 var comboboxcity = new Ext.form.ComboBox({
35 id: 'comboboxcity',
36 fieldLabel: '市',
37 width: 120,
38 store: combocitystore,
39 displayField: 'name',
40 valueField: 'id',
41 triggerAction: 'all',
42 emptyText: '请选择...',
43 allowBlank: false,
44 blankText: '请选择市',
45 editable: false,
46 mode: 'local', //该属性和以下方法为了兼容ie8
47 listeners: {
48 'render': function () {
49 combocitystore.load();
50 }
51 }
52 });
53
54 //创建区Combobox
55 var comboareacity = new Ext.form.ComboBox({
56 fieldLabel: '区',
57 width: 120,
58 store: comboareastore,
59 displayField: 'name',
60 valueField: 'id',
61 triggerAction: 'all',
62 emptyText: '请选择...',
63 allowBlank: false,
64 blankText: '请选择区',
65 editable: false
66 });
67 //联动的实现
68 comboboxcity.on('select', function () {
69 comboareastore.baseParams.id = comboboxcity.getValue();
70 comboareacity.setValue('');
71 comboareastore.load();
72 })
73 //----------------------下拉列表结束----------------------//
74 //表单
75 var form = new Ext.form.FormPanel({
76 frame: true,
77 title: '表单标题',
78 style: 'margin:10px',
79 items: [comboboxcity, comboareacity]
80 });
81 //窗体
82 var win = new Ext.Window({
83 title: '窗口',
84 width: 476,
85 height: 374,
86 resizable: true,
87 modal: true,
88 closable: true,
89 maximizable: true,
90 minimizable: true,
91 buttonAlign: 'center',
92 items: form
93 });
94 win.show();
95 });
96 </script>
97 </head>
98 <body>
99 <!--
100 说明：
101 (1)var combocitystore = new Ext.data.Store():创建一个新的数据源。
102 (2)proxy: new Ext.data.HttpProxy({ url: '/App_Ashx/Demo/City.ashx' })：数据代理为http代理，地址为/App_Ashx/Demo/City.ashx。
103 (3)reader: new Ext.data.JsonReader({ root: 'data' },[{ name: 'id' }, { name: 'name'}]):读取json返回值根节点为data，对象列为id和name。
104 这里要结合client与service观察,我在service端的输出如下：{data:[{id:1,name:'北京'},{id:2,name:'上海'}]}
105 (4)comboboxcity.on('select', function () {}：市选择变化时触发事件。
106 (5)comboareastore.baseParams.id = comboboxcity.getValue()：注意，前面的comboareastore是区的数据源，
107 当市变化时，我们给区的数据源加上个向service端发送的参数。
108 (6)comboareacity.setValue('')：把区的下拉列表设置为空，由于非空验证，Ext会提示用户“请选择区”，这个地方也可以把加载出来的第一个区
109 显示在区的下拉列表中，具体请自行实现吧。
110 (7)comboareastore.load()：区的数据源重新加载。
111 -->
112 </body>
113 </html>
其中与service交互用到两个.net 一般处理程序文件，源码如下：
(1)/App_Ashx/Demo/City.ashx
1 using System.Web;
2
3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
4 {
5 public class City : IHttpHandler
6 {
7 public void ProcessRequest(HttpContext context)
8 {
9 context.Response.Write("{data:[{id:1,name:'北京'},{id:2,name:'上海'}]}");
10 }
11
12 public bool IsReusable
13 {
14 get
15 {
16 return false;
17 }
18 }
19 }
20 }
(2)/App_Ashx/Demo/Area.ashx
1 using System.Web;
2
3 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo
4 {
5 public class Area : IHttpHandler
6 {
7 public void ProcessRequest(HttpContext context)
8 {
9 //接收Client端传来的参数，交根据条件返回
10 if (context.Request.Form["id"].ToString() == "1")
11 {
12 context.Response.Write("{data:[{id:1,name:'东城区'},{id:2,name:'西城区'},{id:2,name:'海淀区'}]}");
13 }
14 else
15 {
16 context.Response.Write("{data:[{id:1,name:'杨浦区'},{id:2,name:'虹口区'},{id:2,name:'闸北区'}]}");
17 }
18 }
19
20 public bool IsReusable
21 {
22 get
23 {
24 return false;
25 }
26 }
27 }
28 }
2.效果如下：
无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]的更多相关文章
- 无废话ExtJs 入门教程十六[页面布局：Layout]
无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 34.无废话ExtJs 入门教程十八[树：TreePanel]
转自:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html 1. <!DOCTYPE html PUBLIC ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
随机推荐
- IE盒模型
IE5.5及更早的版本使用的是IE盒模型,在在IE6及以上版本的浏览器中,浏览器支持一种解决了这种差异的可选的渲染模式,也开始遵循标准模式. IE盒模型和W3C盒模型的差异: IE盒模型,块元素的实际 ...
- linux kernel input 子系统分析
Linux 内核为了处理各种不同类型的的输入设备 , 比如说鼠标 , 键盘 , 操纵杆 , 触摸屏 , 设计并实现了一个对上层应用统一的试图的抽象层 , 即是Linux 输入子系统 . 输入子系统的层 ...
- mac 搭建APK反编译环境[转]
APKtool 用途:获取mainifest.xml res等资源文件 下载:http://ibotpeaches.github.io/Apktool/install/ 使用:apktool d te ...
- 4.了解AngularJS模块和依赖注入
1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...
- Linux中的动态库和静态库(.a/.la/.so/.o)
Linux中的动态库和静态库(.a/.la/.so/.o) Linux中的动态库和静态库(.a/.la/.so/.o) C/C++程序编译的过程 .o文件(目标文件) 创建atoi.o 使用atoi. ...
- Selenium Webdriver元素定位的常用方式
单选框.复选框.文本框和密码框的元素标签都是input,此时单靠tagName无法准确地得到我们想要的元素,需要结合type属性才能过滤出我们要的元素.示例代码如下: public class Sea ...
- C#中 int.TryParse 的用法
int i = -1;bool b = int.TryParse(null, out i);执行完毕后,b等于false,i等于0,而不是等于-1,切记. int i = -1;bool b = in ...
- host位置
windows xp/2003/vista/2008用户HOSTS文件是在“c:\windows\system32\drivers\etc”
- 【leetcode】Maximum Subarray
Maximum Subarray Find the contiguous subarray within an array (containing at least one number) which ...
- poj 1572
一道字符串替换的题目. 题意:给你2*n组字符串,一个是规则,一个是替换的结果. 字符串的题目,确实麻烦,有些细节不处理好就是wa. 这里我提供1组数据 intput 1 abcdef a abcde ...