extjs技术交流,欢迎加群(201926085)

不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其他下拉列表,如:省、市、地区。

当我们监听到省变化时,向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]的更多相关文章

  1. 无废话ExtJs 入门教程十六[页面布局:Layout]

    无废话ExtJs 入门教程十六[页面布局:Layout] extjs技术交流,欢迎加群(201926085) 首先解释什么是布局: 来自百度词典的官方解释:◎ 布局 bùjú: [distributi ...

  2. 无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  3. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  4. 无废话ExtJs 入门教程十四[文本编辑器:Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  5. 无废话ExtJs 入门教程十[单选组:RadioGroup、复选组:CheckBoxGroup]

    无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...

  6. 34.无废话ExtJs 入门教程十八[树:TreePanel]

    转自:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html 1. <!DOCTYPE html PUBLIC ...

  7. 无废话ExtJs 入门教程二十[数据交互:AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  8. 无废话ExtJs 入门教程二十一[继承:Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  9. 无废话ExtJs 入门教程十一[下拉列表:Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

随机推荐

  1. linux奇技淫巧

    用着用着就发现,linux的每个命令都是那么的深奥而富有技巧,实用而淫荡..真可谓奇技淫巧.... 初学的真不易掌握... http://www.cnblogs.com/include/archive ...

  2. .Net中的Debug模式和Release模式

    1.Debug模式和Release模式 在vs中,运行程序有两种模式:Debug和Release 在bin目录下也会生成对应的文件夹,用于存放生成的dll等文件,这两种模式的区别如下: Debug:用 ...

  3. Odyssey.js – 创建互动的,有吸引力的故事

    Odyssey.js 是一个开源工具,它可以让你的地图,叙述和其他多媒体结合成一个美丽的故事.创建新的故事很简单,要求无非是一个现代的 Web 浏览器和一个好的想法.你可以使用现成的模板来控制和设计精 ...

  4. 【练习】ViewPager标签滑动

    效果图: 布局: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:a ...

  5. Linux 进程管理子系统

    一.进程管理子系统 1.进程要素 (1). 程序与进程 程序:存放在磁盘上的一系列代码和数据的可执行映像,是一个静止的实体 进程:是一个执行中的程序,他是一个动态的实体. (2). 进程4要素 1.有 ...

  6. LinqToExcel常用对象

    1.ExcelQueryFactory对象(1)获取工作表名集合IEnumerable<string> GetWorksheetNames() //获取工作薄中的工作表名 foreach ...

  7. Matlab 多项式拟合、稳健滤波等实用函数

    Function summary http://www.biomecardio.com/matlab/index.html clinspace Curvilinearly spaced points ...

  8. 自制Linux 终端 锁屏防窃助手

    很多时候我们不能一直守护在自己的电脑旁边,而且有些文件并不想让别人知道.那么这时候来个锁屏,是再合适不过的了.今天分享一个自制的锁屏工具,如下. 准备 操作系统 : 我这里是ElementaryOS虚 ...

  9. 【原】无脑操作:Gitblit服务器搭建及IDEA整合Git使用

    背景:虽然有GitHub.GitLab这样强大的Git仓库,但是涉及私有Git库要收费,所以自己动手搭建免费的用用 环境:windows 7 旗舰版.JDK 1.8.IDEA 2017 ------- ...

  10. 2、for 循环

    exit_flag = False for i in range(10): if i <5: continue ##继续循环下一次,后面不执行 print(i) for j in range(1 ...