組成元件
要能正確顯示資料，必須包含資料倉儲(Store)，資料欄位的定義(ColumnModel)。
首先我們先定義資料欄位：
var cm = new Ext.grid.ColumnModel({
{header: 'Name', dataIndex: 'name'},
{header: 'Tel', dataIndex: 'tel'}
});
接著設定store，store包含資料取得方式(Proxy)，以及分析方式(reader)。
var data = [
['Brook', '0921'],
['Rene', '0918']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({},[
{name: 'name'},
{name: 'tel'}
]);
});
store.load(); // 載入資料
最後再將他們和grid整合在一起：
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
viewConfig: {
forceFit: true // 自動調整欄寬[註1],
},
title: "brook's guest book",
width: 200,
stripeRows: true,
loadMask: true,
height: 120
});
註1：forceFit在EditorGridPanel底下會出現錯誤(
EditorGridPanel編輯後欄位錯亂的問題).
欄寬設定
調整欄寬除了forceFit以外，還可以設定autoExpandColumn: id，將特定欄寬expand以符合grid的大小，但如果設定了forceFit，autoExpandColumn將會被忽略。
var cm = new Ext.grid.ColumnModel([
{
header:'Name',
dataIndex:'name'
}, {
header:'Tel',
dataIndex:'tel',
id: 'tel'
}
]);
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
title: "brook's guest book",
loadMask: true,
height: 120,
autoExpandColumn: 'tel'
});
因為autoExpandColumn必須指定id，所以cm欄位也必須指定id。
排序
在cm中，將sortable設定為true後，該欄位就可以進行排序。
var cm = new Ext.grid.ColumnModel([
{
header:'Name',
dataIndex:'name',
sortable: true
}, {
header:'Tel',
dataIndex:'tel',
id: 'tel'
}
]);
也可以設定cm.defaultSortable = true，讓所有欄位都可以sort。
也可以預設某欄位排序的方向(由大到小，或由小到大)，在store.sortInfo: {field: 'name', direction: "ASC"}，就會將name以升冪排列，DESC則會降冪排列。
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'bd', type: 'date', dateFormat: 'Y-m-d'}
]),
sortInfo: {
field: 'name',
direction: 'DESC'
}
});
日期顯示
在reader中將type設定為date，並且指定date的format，該欄位就會以date方式讀取，顯示的方式則要透過cm的renderer。
Ext.onReady(function() {
var cm = new Ext.grid.ColumnModel([
{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Birthday',
dataIndex: 'bd',
renderer: Ext.util.Format.dateRenderer('Y年m月d日')
}
]);
var data = [
['Brook', '1999-12-03'],
['Rene', '1998-12-04']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'bd', type: 'date', dateFormat: 'Y-m-d'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
viewConfig: {
forceFit: true
},
title: "brook's guest book",
loadMask: true,
height: 120,
});
});
由上例可知，只要透過cm.renderer就可以在顯示時加入一些變化。renderer函數包含value, metadata, css, record, rowIndex, colIndex, store等參數。
- value : Object
這個cell的資料
- metadata : Object
包含要套用在該CELL的CSS和HTML屬性的物件
- record : Ext.data.record
該列的資料物件
- rowIndex : Number
Row index
- colIndex : Number
Column index
- store : Ext.data.Store
The Ext.data.Store object from which the Record was extracted.
Check box
CheckboxSelectionModel會在該欄位上顯示check box，讓使用者勾選。預設是多選，設定singleSelect為true可以改變為單選。
Ext.onReady(function() {
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
sm,
{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Tel',
dataIndex: 'tel'
}
]);
var data = [
['Brook', '0921'],
['Rene', '0918']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'name'},
{name: 'tel'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
viewConfig: {
forceFit: true
},
title: "brook's guest book",
loadMask: true,
height: 120,
width: 200
});
});
自動顯示行號
自動顯示行號是由Ext.grid.RowNumberer()提供的功能，和CheckboxSelectionModel一樣，放入cm就可以達到自動顯示行號之功能。
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Tel',
dataIndex: 'tel'
}
]);
Selection Model
在Ext.grid.GridPanel中，Selection Model預設是使用Ext.grid.RowSelectionModel，而且是可以多選，如果是單選就必須設定RowSelectionModel.singleSelect=true。
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
viewConfig: {
forceFit: true
},
title: "brook's guest book",
loadMask: true,
height: 120,
width: 200
});
被選到的Row，可以透過grid.getSelectionModel().getSelections()取得。
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
sm: new Ext.grid.RowSelectionModel(),
viewConfig: {
forceFit: true
},
title: "brook's guest book",
loadMask: true,
height: 120,
width: 200,
buttons: [{
text:'show select',
handler: function() {
var selections = grid.getSelectionModel().getSelections();
for (var i = 0; i < selections.length; i++) {
alert(selections[i].get('name') + ' is selection');
}
}
}]
});
也可以選擇Cell Model，EditorGrid的預設Selection Model就是CellSelectionModel。
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
sm: new Ext.grid.CellSelectionModel(),
viewConfig: {
forceFit: true
},
title: "brook's guest book",
loadMask: true,
height: 120,
width: 200
});
改變cell中的顯示(render)
圖文並茂的網頁是現在的趨勢，您可以透過Ext.grid.ColumnModel.renderer設定顯示cell時，要做哪些變化，比如，我想判斷電話號碼，顯示出電話號碼屬於哪家電信業者，程式碼如下：
Ext.onReady(function() {
var record = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'tel', type: 'string'}
]);
var data = [
['Brook', '0921'],
['Rene', '0918'],
['John', '0980']
];
function renderTel(value, metaData, record, rowIndex, colIndex, store) {
if ('0921' == value) {
return '<img src="images/cht.gif"/>' + value;
} else if ('0918' == value) {
return '<img src="images/twm.gif"/>' + value;
}
return value;
}
var cm = new Ext.grid.ColumnModel([
{header: 'Name', dataIndex: 'name'},
{header: 'Tel', dataIndex: 'tel', renderer: renderTel}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({},[
{name: 'name'},
{name: 'tel'}
]),
removed: []
});
store.load();
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: store,
cm: cm,
sm: new Ext.grid.RowSelectionModel(),
viewConfig: {
forceFit: true
},
title: "Brook's address book",
loadMask: true,
height: 200,
width: 330
});
});
render function的參數說明如下：
- value： 將要顯示到cell的值。
- metaData：cell的屬性，包含css。
- record：該行資料。
- rowIndex：row index。
- colIndex：column index。
- store：使用中的store。
