朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
在Extjs中，GridPanel用於數據顯示，即我們平時說的列表頁。在本節中，我們先對GridPanel有個基本的認識，后繼過程再做Demo練習詳細講解在開發中的應用。
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 src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></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 //數據源 14 var jsonstore = new Ext.data.JsonStore({ 15 data: [ 16 { id: 1, name: '張三', sex: '0', birthday: '2001/01/01' }, 17 { id: 2, name: '李四', sex: '1', birthday: '2002/01/01' }, 18 { id: 3, name: '王五', sex: '0', birthday: '2003/01/01' } 19 ], 20 fields: ['id', 'name', 'sex', { name: 'birthday', type: 'date', dateformat: 'Y/m/d'}] 21 }); 22 //復選框列 23 var sm = new Ext.grid.CheckboxSelectionModel(); 24 //渲染性別 25 var sexrender = function (value, metaData, record, rowIndex, cloIndex, store) { 26 if (value == '0') { 27 metaData.attr = 'style="font-weight:bold";' 28 return '男'; 29 } 30 else 31 return '女'; 32 } 33 //定義列 34 var column = new Ext.grid.ColumnModel({ 35 columns: [ 36 sm, 37 { header: '編號', dataIndex: 'id', sortable: true }, 38 { header: '姓名', dataIndex: 'name' }, 39 { header: '性別', dataIndex: 'sex', renderer: sexrender }, 40 { header: '出生日期', dataIndex: 'birthday', renderer: Ext.util.Format.dateRenderer('Y-m-d') } 41 ] 42 }); 43 //添加按鈕 44 var tbtn = new Ext.Toolbar.Button({ 45 text: '查看選中項', 46 listeners: { 47 'click': function () { 48 var row = grid.getSelectionModel().getSelections(); 49 for (var i = 0; i < row.length; i++) { 50 alert(row[i].get('id')); 51 } 52 } 53 } 54 }); 55 //分頁控件 56 var pager = new Ext.PagingToolbar({ 57 pageSize: 2, 58 store: jsonstore, 59 listeners: { 60 "beforechange": function (bbar, params) { 61 var grid = bbar.ownerCt; 62 var store = grid.getStore(); 63 var start = params.start; 64 var limit = params.limit; 65 alert(store.getCount()); 66 return false; 67 } 68 } 69 }); 70 //列表 71 var grid = new Ext.grid.GridPanel({ 72 sm: sm, 73 title: 'GridPanel', 74 height: 200, 75 store: jsonstore, 76 tbar: [tbtn], 77 bbar: pager, 78 colModel: column 79 }); 80 //表單 81 var form = new Ext.form.FormPanel({ 82 frame: true, 83 fileUpload: true, 84 url: '/App_Ashx/Demo/Upload.ashx', 85 title: '表單標題', 86 style: 'margin:10px', 87 items: [grid] 88 }); 89 //窗體 90 var win = new Ext.Window({ 91 title: '窗口', 92 width: 476, 93 height: 374, 94 resizable: true, 95 modal: true, 96 closable: true, 97 maximizable: true, 98 minimizable: true, 99 buttonAlign: 'center', 100 items: form 101 }); 102 win.show(); 103 }); 104 </script> 105 </head> 106 <body> 107 <!-- 108 說明： 109 (1)var jsonstore = new Ext.data.JsonStore():創建一個新的數據源。 110 data: 數據項，如數據庫中的存儲一樣 111 id name sex brithday 112 1 張三 0 2001-01-01 113 2 李四 1 2002-01-01 114 3 王五 0 2003-01-01 115 fields: 列的定義,指出數據源應該有幾列，每列的名稱和數據類型等信息，如上所示，說明存在4列，列名分別為：id,name,sex,brithday。 116 (2) var sm = new Ext.grid.CheckboxSelectionModel()：創建一個復選框的列。 117 注意 sm 要在兩個地方使用，一、要告訴列模型，上例的36行。二、要告訴列表，上例的72行。缺一不可。 118 (3)var column = new Ext.grid.ColumnModel():grid的列，這個是定義gird應該有幾列。 119 如上所示：第一列為：sm[復選框]，第二列為：{ header: '編號', dataIndex: 'id', sortable: true }，header：顯示在gird上面的標題，dataIndex：'id'對應數據源的映射關系，意思就是說，表頭顯示叫"編號"，而實際的數據對應的是數據源的id這一列。 120 { header: '性別', dataIndex: 'sex', renderer: sexrender }：renderer渲染列，執行的方法為 sexrender 121 var sexrender = function (value, metaData, record, rowIndex, cloIndex, store) { 122 if (value == '0'){ 123 metaData.attr = 'style="font-weight:bold";' 124 return '男'; 125 } 126 else 127 return '女'; 128 } 129 參數說明： 130 value:當前單元格的值。 131 meetaData:設置元素<div>男</div>的樣式表與屬性值，如上所示：我加了個加粗顯示的樣式。這個參數包含兩個屬性：metaData.css與metaData.attr 132 record：當前Record對象引用。 133 rowIndex:當前單元格行的索引。 134 colIndex:當前單元格列的索引。 135 store:store的引用。 136 我們最常用的就是 value，平時寫的時候大多數只傳value，例如： var sexrender = function(value){處理方法} 137 (4)var tbtn = new Ext.Toolbar.Button()：創建一個工具欄按鈕，tbar可以添加多個按鈕，處理不同的方法，如"添加","刪除","修改"等。 138 (5)var row = grid.getSelectionModel().getSelections():獲取選中項的行，row[i].get('id')獲取行中的某一列。 139 (6)var grid = new Ext.grid.GridPanel()：聲明一個新的gird。 140 sm: sm,//選擇列 141 store: jsonstore,//數據源 142 tbar: [tbtn],//頂部的按鈕 143 bbar: pager,//底部的分頁 144 colModel: column//列表頭與列 145 (7)var pager = new Ext.PagingToolbar()：創建一個新的分頁控件 146 pageSize: 2,//頁碼大小為2 147 store: jsonstore,分頁的數據源 148 listeners: {//由於沒有鏈接后台數據庫動態綁定數據庫，這里在，點下一頁時‘beforechange’事件做了個 return false 149 "beforechange": function (bbar, params) { 150 var grid = bbar.ownerCt; 151 var store = grid.getStore(); 152 var start = params.start;//起始數據的索引號 153 var limit = params.limit;//每頁的大小 154 console.log("==下面是打印信息") 155 console.log(store.getCount()); 156 console.log(start); 157 console.log(limit); 158 console.log("==打印結束。") 159 return false; 160 } 161 } 162 }); 163 --> 164 </body> 165 </html>
2.效果如下：
