朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
我們在開發系統的時候經常會用到 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