无废话ExtJs 教程十一[下拉列表联动：Combobox_Two]

huiqinbo

浏览: 344633 次
性别:
来自: 北京

最近访客更多访客>>

薛宝钗的猫

iamjustlyl

A741841403

qqpkat2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

无废话ExtJs 系列教程

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

当我们监听到省变化时，向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 教程十二[员工信息表Demo：Ad ... | 无废话ExtJs 教程十[下拉列表：Combobox]

2015-06-03 21:16
浏览 591
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

无废话ExtJs 教程十一[下拉列表联动：Combobox_Two]

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

无废话ExtJs 教程十一[下拉列表联动：Combobox_Two]

评论

发表评论

相关推荐

无废话ExtJs 系列教程十四----(五) [折叠布局：AccordionLayout ]

无废话ExtJs 系列教程十四——(四) [边框布局：BorderLayout ]

无废话ExtJs 系列教程十四-----(三) [卡片式布局：CardLayout ]

无废话ExtJs 系列教程十四-----(二) [列布局：ColumnLayout ]

无废话ExtJs 系列教程十四-----(一) [锚点布局：AnchorLayout ]

无废话ExtJs 系统教程十九[动态复选框：RemoteCheckboxGroup]

无废话ExtJs 系列教程十八[继承：Extend]

无废话ExtJs 系列教程十七[数据交互：AJAX]

无废话ExtJs 系列教程十五[树：TreePanel]

无废话ExtJs 系统教程十四[列表：GridPanel]

无废话ExtJs 系列教程十三[页面布局：Layout]

无废话ExtJs 教程十二[员工信息表Demo：AddUser]

无废话ExtJs 教程十[下拉列表：Combobox]

无废话ExtJs 教程九[单选组：RadioGroup、复选组：CheckBoxGroup]

无废话ExtJs 教程八[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]

无废话ExtJs 教程七[登陆窗体Demo：Login]

无废话ExtJs 教程六[按钮：Button]

无废话ExtJs 教程五[文本框：TextField]

无废话ExtJs 教程四[表单：FormPanel]

无废话ExtJs 教程三[窗体：Window组件]

最近访客更多访客>>