Extjs GridPanel 提供了非常強大資料表格功能，在GridPanel可以展示資料列表，可以對資料列表進行選擇、編輯等。在之前的Extjs MVC開發模式詳解中，我們已經使用到了GridPanel，今天我們來介紹一下Extjs中GridPanel的詳細用法。

本文的示例程式碼適用於Extjs 4.x和Extjs 5.x，在Extjs 4.2.1 和Extjs 5.0.1中親測可用！

要使用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的各種代理方式，可以參考我之前的文章：

Extjs 客戶端代理（proxy）
Extjs 伺服器代理（proxy）

非同步載入通常採用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

1. 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
})
],

1. 為需要編輯的列指定編輯器

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}