我們?cè)陂_(kāi)發(fā)系統(tǒng)的時(shí)候經(jīng)常會(huì)用到 Checkgroup 由后臺(tái)取出的情況，然而在 ExtJs CheckboxGroup 并沒(méi)有提供該服務(wù)端數(shù)據(jù)源的屬性。
1.代碼如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www./1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架開(kāi)始--> 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框架結(jié)束--> 11 <script type="text/javascript"> 12 Ext.onReady(function () { 13 //----------------------繼承了CheckboxGroup使其能夠取 remote 數(shù)據(jù)源開(kāi)始----------------------// 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) { //如果沒(méi)有指定就從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 數(shù)據(jù)源結(jié)束----------------------// 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: '招聘來(lái)源', 86 style: 'padding-top:3px;height:17px;' 87 }); 88 89 //創(chuàng)建panel 90 var panel = new Ext.Panel({ 91 title: '動(dòng)態(tài)復(fù)選框', 92 width: 200, 93 height: 200, 94 frame: true, 95 items: [checksource] 96 }); 97 98 //創(chuàng)建窗體 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 說(shuō)明： 118 (1)要引用 <script type="text/javascript" src="/Ext/ext-basex.js"></script>，因?yàn)椋旱?1行的 async: false, 設(shè)置了Ajax為同步讀取數(shù)據(jù)， 119 什么是同步：什么是異步？ 120 同步：client 向 service 提交請(qǐng)求--service 處理響應(yīng)[此時(shí)client端瀏覽器處于假死狀態(tài)]----直到 service 處理完畢后client才會(huì)程序繼續(xù)順序執(zhí)行。 121 異步：client 向 service 提交請(qǐng)求--service 處理響應(yīng)[此時(shí)client端瀏覽器處于活動(dòng)狀態(tài)，可繼續(xù)執(zhí)行其他程序]---處理完畢后程序插入執(zhí)行，因?yàn)閏lient的程序也在進(jìn)行，所以service 端處理完了以后，如果客戶(hù)端響應(yīng)時(shí)會(huì)插入到當(dāng)前的執(zhí)行隊(duì)列執(zhí)行。然后順序執(zhí)行。 122 例子：A,B[向服務(wù)器發(fā)送請(qǐng)求],C[服務(wù)器返回請(qǐng)求結(jié)果],D,E為順序執(zhí)行的客戶(hù)端程序。 123 同步處理：A--B--C--D--E，完全按順序，E會(huì)等待C后再執(zhí)行。 124 異步處理：A--B--D--E--C，或是 A--B--D--C--E等等，B向服務(wù)器發(fā)送請(qǐng)求后，D、E不會(huì)等待C的結(jié)果，而是繼續(xù)執(zhí)行。C什么時(shí)候有結(jié)果了，什么時(shí)候在客戶(hù)端執(zhí)行，隨機(jī)插入。 125 為什么這里要用 同步？ 126 在onRender事件處理程序時(shí)，我們?cè)诤笈_(tái)取出 items 數(shù)據(jù)源的時(shí)候，如果是異步，很可能在使用 items 的時(shí)候 73行 this.items = items; 會(huì)報(bào)未定義或是為空的情況。根本原因就在于，服務(wù)器端還沒(méi)有給該數(shù)組賦值，客戶(hù)端就開(kāi)始使用，所以這里要設(shè)置成同步。 127 (2)關(guān)于 /Ext/ext-basex.js 這個(gè)文件改過(guò)代碼，為了支持 Firefox 12 ，如果是在其他地方下載的該文件，很可能 Firefox12 不支持。 128 129 130 (3)var checksource = new Ext.ux.RemoteCheckboxGroup({ 131 name: 'checksource', //名稱(chēng)，當(dāng)客戶(hù)端提交的時(shí)候，服務(wù)端會(huì)根據(jù)該名稱(chēng)接收值，當(dāng)值為多選時(shí)post 結(jié)果如下[1,2,3]，用'，'分隔。 132 boxLabel: 'name', //顯示的字段 133 inputValue: 'id', //checkBox存的值 134 url: '/App_Ashx/Demo/Category.ashx',//數(shù)據(jù)源的地址 135 fieldLabel: '招聘來(lái)源', 136 style: 'padding-top:3px;height:17px;' 137 }); 138 --> 139 </body> 140 </html>
服務(wù)端文件 /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:'類(lèi)別一'},{id:2,name:'類(lèi)別二'},{id:2,name:'類(lèi)別三'}]"); 10 } 11 12 public bool IsReusable 13 { 14 get 15 { 16 return false; 17 } 18 } 19 } 20 }
2.效果如下：
使用文件下載：ext-basex.rar
轉(zhuǎn)載請(qǐng)注明出處：http://www.cnblogs.com/iamlilinfeng
