无废话ExtJs 入门教程二十二[动态复选框：RemoteCheckboxGroup]
我们在开发系统的时候经常会用到 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 }
2.效果如下：
使用文件下载：ext-basex.rar
转载请注明出处：http://www.cnblogs.com/iamlilinfeng
