Extjs GridPanel 提供了非常強大數據表格功能，在GridPanel可以展示數據列表，可以對數據列表進行選擇、編輯等。在之前的Extjs MVC開發模式詳解中，我們已經使用到了GridPanel，今天我們來介紹一下Extjs中GridPanel的詳細用法。
本文的示例代碼適用於Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中親測可用！
本文由齊飛（youring2@gmail.com）原創，並發布在http://www.qeefee.com/article/extjs-grid-in-detail，轉載請注明出處！推薦更多Extjs教程、Extjs5教程
創建GridPanel
要使用GridPanel，首先要定義Store，而在創建Store的時候必須要有Model，因此我們首先來定義Model：
//1.定義Model Ext.define("MyApp.model.User", { extend: "Ext.data.Model", fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' }, { name: 'phone', type: 'string' } ] });
然后創建Store：
//2.創建store var store = Ext.create("Ext.data.Store", { model: "MyApp.model.User", autoLoad: true, pageSize: 5, proxy: { type: "ajax", url: "GridHandler.ashx", reader: { root: "rows" } } });
接下來才是GridPanel的代碼：
//3.創建grid var grid = Ext.create("Ext.grid.Panel", { xtype: "grid", store: store, width: 500, height: 200, margin: 30, columnLines: true, renderTo: Ext.getBody(), selModel: { injectCheckbox: 0, mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI" checkOnly: true //只能通過checkbox選擇 }, selType: "checkboxmodel", columns: [ { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age', xtype: 'numbercolumn', format: '0', editor: { xtype: "numberfield", decimalPrecision: 0, selectOnFocus: true } }, { text: '電話', dataIndex: 'phone', editor: "textfield" } ], plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ], listeners: { itemdblclick: function (me, record, item, index, e, eOpts) { //雙擊事件的操作 } }, bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true } });
這個GridPanel的效果如下：
在這個GridPanel中，我們可以通過復選框勾選數據行，可以編輯“年齡”和“電話”列，還可以對數據進行客戶端排序。
Extjs GridPanel的列
Extjs GridPanel的列有多種類型，例如：文本列、數字列、日期列、選擇框列、操作列等。我們可以通過xtype來指定不同的列類型。
下面是列的常用配置項：
- xtype：列類型
- text：列頭顯示的文字
- dataIndex：綁定的字段名
- width：寬度
- flex：自動適應的寬度
- sortable：是否可排序，默認為是
- hideable：是否可隱藏，默認為是
- locked：鎖定列，將列鎖定在grid的開頭，當grid出現滾動條的時候該屬性比較有用。默認為否
- lockable：是否可鎖定，默認為否
- format：格式化字符串，常用於日期、數字的格式化。日期：'Y-m-d'；日期時間：'Y-m-d H:i:s'；數字：'0,000.00'（帶有千位分隔符、保留兩位小數）、'0.00'（保留兩位小數），'0'（不保留小數）
- renderer：自定義繪制方法，可以是Ext.util.Format中定義好的方法名稱，也可以是自定義否function，該方法接收下面的參數：value、metadata、record、rowIndex、colIndex、store、view，並需要一個用來顯示的返回值。
- editor：編輯器，當使用編輯插件的時候才會起作用。
Extjs GridPanel行選擇模型（SelectionModel）
控制Extjs GridPanel行選擇模型的兩個配置項是selType和selModel。默認情況下，selType為rowmodel，對應的Ext.selection.Model。這種選擇模型不會在grid中添加復選框，它通過點擊行進行選中，默認為多選“MULTI”。
如果我們要使用復選框來選擇行，我們需要使用下面的配置：
selType: "checkboxmodel",
然后，我們可以通過selModel來配置selType：
selModel: { injectCheckbox: 0, mode: "SIMPLE", //"SINGLE"/"SIMPLE"/"MULTI" checkOnly: true //只能通過checkbox選擇 },
Extjs GridPanel行選擇
除了界面操作來選中行，我們還可以通過代碼來選中行：
//選擇行，並保持其他行的選擇狀態 grid.getSelectionModel().select(records, true); //選擇所有 grid.getSelectionModel().selectAll(); //根據row index選擇 grid.getSelectionModel().selectRange(startRow, endRow, true)
Extjs GridPanel獲取選中行
獲取選中行，仍然需要通過SelectionModel來完成：
var records = grid.getSelectionModel().getSelection();
Extjs GridPanel顯示行號
默認情況下Extjs GridPanel是不顯示行號的，我們需要手動添加行號列。
columns: [
{ xtype:
"rownumberer", text: "序號"
, width:40 }, { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age', xtype: 'numbercolumn', format: '0', editor: { xtype: "numberfield", decimalPrecision: 0, selectOnFocus: true } }, { text: '電話', dataIndex: 'phone', editor: "textfield" } ],
我們可以設置行號的列頭和寬度。
Extjs GridPanel異步加載數據
Extjs GridPanel的異步加載數據是通過Store來實現的。我們之前已經介紹過Extjs Store的各種代理方式，可以參考我之前的文章：
異步加載通常采用ajax代理，例如我們代碼中用到的：
//2.創建store var store = Ext.create("Ext.data.Store", { model: "MyApp.model.User", autoLoad: true, pageSize: 5, proxy: { type: "ajax", url: "GridHandler.ashx", reader: { root: "rows" } } });
服務器端返回的數據格式如下：
{ "rows": [ { "name": "Tom", "age": 12, "phone": "1233455" }, { "name": "Jerry", "age": 12, "phone": "1233455" }, { "name": "Sinbo", "age": 12, "phone": "1233455" }, { "name": "Jack", "age": 12, "phone": "1233455" }, { "name": "Johnson ", "age": 12, "phone": "1233455" } ], "total": 5 }
Extjs GridPanel分頁
當GridPanel中數據量大的時候，我們就需要使用分頁了。
分頁的實現由兩部來完成，首先是在Store中添加pageSize配置項，用來確定每頁顯示多少行數據；然后需要為GridPanel添加PagingToolbar。
1. Store添加pageSize配置項
var store = Ext.create("Ext.data.Store", { model: "MyApp.model.User", autoLoad: true, pageSize: 5, proxy: { type: "ajax", url: "GridHandler.ashx", reader: { root: "rows" } } });
在分頁參數加上之后，Extjs在執行ajax請求的時候會添加三個參數：
- page：當前頁
- start：起始行的行號
- limit：每頁數據行數，默認為25；這個參數值就是我們設置的pageSize
2. GridPanel添加PagingToolbar
bbar: { xtype: "pagingtoolbar", store: store, displayInfo: true }
在完成這兩項配置以后，GridPanel就可以使用分頁了。
Extjs GridPanel列編輯
Extjs GridPanel可以方便的實現列編輯。要實現這個功能需要兩步：
1. 添加GridPanel的編輯插件
plugins: [ Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 1 }) ],
2. 為需要編輯的列指定編輯器
columns: [ { xtype: "rownumberer", text: "序號", width:40 }, { text: '姓名', dataIndex: 'name' }, { text: '年齡', dataIndex: 'age', xtype: 'numbercolumn', format: '0', editor: { xtype: "numberfield", decimalPrecision: 0, selectOnFocus: true } }, { text: '電話', dataIndex: 'phone', editor: "textfield" }
編輯器可以是一個field的配置，也可以是一個xtype。
對於編輯后的單元格，會在左上角出現一個紅色的標識，說明該數據是編輯過的，要想去掉這個紅色箭頭，需要調用record的commit()方法。
grid.on('edit', function (editor, e) { // commit the changes right after editing finished e.record.commit(); });
除了單元格編輯外，Extjs還支持行編輯功能，只需要將插件替換為RowEditing即可，此處不再進行演示。
Extjs GridPanel選中單元格內容
在默認情況下，Extjs GridPanel不允許進行選中單元格中的內容，由於不能選中，我們就不可能來復制單元格中的內容。如果要實現這種功能，我們需要通過viewConfig來實現。
代碼如下：
viewConfig:{ stripeRows:true,//在表格中顯示斑馬線 enableTextSelection:true //可以復制單元格文字 }
禁止顯示列頭部右側菜單
Extjs GridPanel的列，當我們點擊列頭的時候，會出現一個菜單：
如果我們要禁用這個菜單，可以將每個column定義屬性menuDisabled指定為true，代碼如下：
{header: 'Idno', dataIndex: 'idno', width:150,menuDisabled:true}