Extjs GridPanel用法詳解(單元格點選事件)
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。
- 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
- GridPanel新增PagingToolbar
bbar: { xtype: “pagingtoolbar”, store: store, displayInfo: true }
在完成這兩項配置以後,GridPanel就可以使用分頁了。
Extjs GridPanel列編輯
Extjs GridPanel可以方便的實現列編輯。要實現這個功能需要兩步:
- 新增GridPanel的編輯外掛
plugins: [
Ext.create(‘Ext.grid.plugin.CellEditing’, {
clicksToEdit: 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}