无废话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 ...
随机推荐
- 4.了解AngularJS模块和依赖注入
1.模块和依赖注入概述 1.了解模块 AngularJS模块是一种容器,把代码隔离并组织成简洁,整齐,可复用的块. 模块本身不提供直接的功能:包含其他提供功能的对象的实例:控制器,过滤器,服务,动画 ...
- github 多个项目共用同一个key的方法
后面的项目不用添加ssh keys, 直接在项目下设置合作者(Collaborators), 搜索出去加进去即可免密码传代码.
- 【转】【编码】ANSI,ASCII,Unicode,UTF8之一
不同的国家和地区制定了不同的标准,由此产生了 GB2312.GBK.GB18030.Big5.Shift_JIS 等各自的编码标准.这些使用多个字节来代表一个字符的各种汉字延伸编码方式,称 ...
- python查找并删除相同文件-UNIQ File-script版本
今天用wxPython做了一个GUI程序,实现查找指定目录内的相同文件,主要原理是计算文件的md5值(计算前先找出文件大小相同的文件,然后计算这些文件的md5值,而不是所有文件都计算,大大减少了md5 ...
- MySQL高可用性之Keepalived+MySQL（双主热备）
环境描述:OS:CentOS6.5_X64MASTER:192.168.0.202BACKUP:192.168.0.203VIP:192.168.0.204 1.配置两台Mysql主主同步[root@ ...
- WPF 中更新界面信息
1.Dispatcher.BeginInvoke int ii = 0; new Thread(new ParameterizedThreadStart((i) => { while (true ...
- JQuery 遍历 - prev() 方法
http://www.w3school.com.cn/jquery/traversing_prev.asp http://www.w3school.com.cn/jquery/jquery_ref_t ...
- ansible操作远程服务器报Error: ansible requires the stdlib json or simplejson module, neither was found!
通过ansible执行远程命令时报如下异常: Error: ansible requires the stdlib json or simplejson module, neither was fou ...
- hdu3652
基本的数位dp,需要记录前面除以13的余数. #include <cstdio> #include <cstring> using namespace std; #define ...
- Django~学习计划
20160302 Excel,PDF 处理 GeoDjango学习:GIS编程,百度地图 Javascript 邮件系统 图像处理