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