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

来源：互联网发布：nba2k16乔丹捏脸数据编辑：程序博客网时间：2024/06/06 20:17

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

当我们监听到省变化时，向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 IsReusable13         {14             get15             {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             else15             {16                 context.Response.Write("{data:[{id:1,name:'杨浦区'},{id:2,name:'虹口区'},{id:2,name:'闸北区'}]}");17             }18         }19 20         public bool IsReusable21         {22             get23             {24                 return false;25             }26         }27     }28 }

2.效果如下：

阅读全文

0 0