ExtJs 入门教程二十二[动态复选框：RemoteCheckboxGroup]

最新推荐文章于 2017-03-23 14:56:44 发布

u014490157

最新推荐文章于 2017-03-23 14:56:44 发布

阅读量483

点赞数

我们在开发系统的时候经常会用到 Checkgroup 由后台取出的情况，然而在 ExtJs CheckboxGroup 并没有提供该服务端数据源的属性。

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 type="text/javascript" src="/Ext/ext-basex.js"></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             //----------------------继承了CheckboxGroup使其能够取 remote 数据源开始----------------------//
 14             Ext.namespace("Ext.ux");
 15             Ext.ux.RemoteCheckboxGroup = Ext.extend(Ext.form.CheckboxGroup, {
 16                 url: '',
 17                 boxLabel: '',
 18                 inputValue: '',
 19                 setValue: function (val) {
 20                     if (val.split) {
 21                         val = val.split(',');
 22                     }
 23                     this.reset();
 24                     for (var i = 0; i < val.length; i++) {
 25                         this.items.each(function (c) {
 26                             if (c.inputValue == val[i]) {
 27                                 c.setValue(true);
 28                             }
 29                         });
 30                     }
 31                 },
 32                 reset: function () {
 33                     this.items.each(function (c) {
 34                         c.setValue(false);
 35                     });
 36                 },
 37                 getValue: function () {
 38                     var val = [];
 39                     this.items.each(function (c) {
 40                         if (c.getValue() == true)
 41                             val.push(c.inputValue);
 42                     });
 43                     return val.join(',');
 44                 },
 45                 onRender: function (ct, position) {
 46                     var items = [];
 47                     if (!this.items) { //如果没有指定就从URL获取
 48                         Ext.Ajax.request({
 49                             url: this.url,
 50                             scope: this,
 51                             async: false,
 52                             success: function (response) {
 53                                 var data = Ext.util.JSON.decode(response.responseText);
 54                                    55                                 var Items2 = this.items;
 56                                 if (this.panel) {
 57                                     var columns = this.panel.items;
 58                                     if (columns) {
 59                                         for (var i = 0; i < columns.items.length; i++) {
 60                                             column = columns.items[i];
 61                                             column.removeAll();
 62                                         }
 63                                         Items2.clear();
 64                                     }
 65                                 }
 66                                 for (var i = 0; i < data.length; i++) {
 67                                     var d = data[i];
 68                                     var chk = { boxLabel: d[this.boxLabel], name: this.name, inputValue: d[this.inputValue] };
 69                                     items.push(chk);
 70                                 }
 71                             }
 72                         });
 73                         this.items = items;
 74                     }
 75                     Ext.ux.RemoteCheckboxGroup.superclass.onRender.call(this, ct, position);
 76                 }
 77             });
 78             Ext.reg('remotecheckboxgroup', Ext.ux.RemoteCheckboxGroup);
 79             //----------------------继承了CheckboxGroup使其能够取 remote 数据源结束----------------------//
 80             var checksource = new Ext.ux.RemoteCheckboxGroup({
 81                 name: 'checksource',
 82                 boxLabel: 'name',
 83                 inputValue: 'id',
 84                 url: '/App_Ashx/Demo/Category.ashx',
 85                 fieldLabel: '招聘来源',
 86                 style: 'padding-top:3px;height:17px;'
 87             });
 88 
 89             //创建panel
 90             var panel = new Ext.Panel({
 91                 title: '动态复选框',
 92                 width: 200,
 93                 height: 200,
 94                 frame: true,
 95                 items: [checksource]
 96             });
 97 
 98             //创建窗体
 99             var win = new Ext.Window({
100                 title: '窗口',
101                 id: 'window',
102                 width: 476,
103                 height: 374,
104                 resizable: true,
105                 modal: true,
106                 closable: true,
107                 maximizable: true,
108                 minimizable: true,
109                 items: [panel]
110             });
111             win.show();
112         });
113     </script>
114 </head>
115 <body>
116 <!--
117 说明：
118 (1)要引用 <script type="text/javascript" src="/Ext/ext-basex.js"></script>，因为：第51行的  async: false, 设置了Ajax为同步读取数据，
119    什么是同步：什么是异步？
120    同步：client 向 service 提交请求--service 处理响应[此时client端浏览器处于假死状态]----直到 service 处理完毕后client才会程序继续顺序执行。
121    异步：client 向 service 提交请求--service 处理响应[此时client端浏览器处于活动状态，可继续执行其他程序]---处理完毕后程序插入执行，因为client的程序也在进行，所以service 端处理完了以后，如果客户端响应时会插入到当前的执行队列执行。然后顺序执行。
122    例子：A,B[向服务器发送请求],C[服务器返回请求结果],D,E为顺序执行的客户端程序。
123    同步处理：A--B--C--D--E，完全按顺序，E会等待C后再执行。
124    异步处理：A--B--D--E--C，或是 A--B--D--C--E等等，B向服务器发送请求后，D、E不会等待C的结果，而是继续执行。C什么时候有结果了，什么时候在客户端执行，随机插入。
125    为什么这里要用 同步？
126    在onRender事件处理程序时，我们在后台取出 items 数据源的时候，如果是异步，很可能在使用 items 的时候 73行 this.items = items; 会报未定义或是为空的情况。根本原因就在于，服务器端还没有给该数组赋值，客户端就开始使用，所以这里要设置成同步。
127 (2)关于 /Ext/ext-basex.js 这个文件改过代码，为了支持 Firefox 12 ，如果是在其他地方下载的该文件，很可能 Firefox12 不支持。                  
128 
129 
130 (3)var checksource = new Ext.ux.RemoteCheckboxGroup({
131     name: 'checksource',    //名称，当客户端提交的时候，服务端会根据该名称接收值，当值为多选时post 结果如下[1,2,3]，用'，'分隔。
132     boxLabel: 'name',       //显示的字段
133     inputValue: 'id',       //checkBox存的值
134     url: '/App_Ashx/Demo/Category.ashx',//数据源的地址
135     fieldLabel: '招聘来源',
136     style: 'padding-top:3px;height:17px;'
137 });
138 -->
139 </body>
140 </html>

服务端文件 /App_Ashx/Demo/Category.ashx 代码如下：

 1 using System.Web;
 2 
 3 namespace ExtJs.WebSite.App_Ashx.Demo
 4 {
 5     public class Category : IHttpHandler
 6     {
 7         public void ProcessRequest(HttpContext context)
 8         {
 9             context.Response.Write("[{id:1,name:'类别一'},{id:2,name:'类别二'},{id:2,name:'类别三'}]");
10         }
11 
12         public bool IsReusable
13         {
14             get
15             {
16                 return false;
17             }
18         }
19     }
20 }