无废话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 ...
随机推荐
- linux kernel input 子系统分析
Linux 内核为了处理各种不同类型的的输入设备 , 比如说鼠标 , 键盘 , 操纵杆 , 触摸屏 , 设计并实现了一个对上层应用统一的试图的抽象层 , 即是Linux 输入子系统 . 输入子系统的层 ...
- 1.AngularJS初探
1.需要什么前端开发环境 1)代码编辑工具 webstorm 2)断点调试工具 chrome插件Batarang 3)版本管理 tortoiseGit 4)代码合并和混淆工具 grunt-contri ...
- YUVviewerPlus使用教程
1.YUVviewerPlus用于播放yuv文件,点击Open File打开yuv文件 2.点击Play播放yuv文件
- td的title属性
今天才知道html元素td还有一个title属性,就是一个tooltip的东西,即当你把鼠标放在td上面的时候,会弹出一个提示语,这个提示语就是td的title. 把td的文本赋值给title: ht ...
- IPC----消息队列
消息队列可以认为是一个消息链表,System V 消息队列使用消息队列标识符标识.具有足够特权的任何进程都可以往一个队列放置一个消息,具有足够特权的任何进程都可以从一个给定队列读出一个消息.在某个进程 ...
- sharepoint定义固定的网站集
SPSite site = new SPSite(http://192.168.0.3/); SPWeb web = site.RootWeb;
- centos locate搜索工具
locate搜索工具 [root@localhost ~]# yum install mlocate [root@localhost ~]# locate passwd locate: can not ...
- java web 学习 --第八天（Java三级考试）
第七天的学习内容:http://www.cnblogs.com/tobecrazy/p/3464231.html EL表达式 EL : Expression Language 使用EL表达式可以减少& ...
- ffmpeg-20160816-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...
- ffmpeg-20160813-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...