ExtJS 教學 Grid 介紹與常用功能
===== Ext.grid.Panel =====
Grid 是在客戶端上顯示大量表格資料的好幫手！實際上就是專門用來顯示類似資料庫Table 的格式的UI 元件。- 讓大量的表格資料變得容易存取、甚至還提供排序和過濾功能。
- 由於 Grid 繼承自 Panel 類別，因此也可以設定上工具列 tbar 與下工具列 bbar 。
- xtype 為: gridpanel, grid
Grid 繼承自 Ext.panel.Panel類別 :
* Ext.panel.Panel
* Ext.panel.Table
* Ext.grid.Panel
一個完整的Grid 分為兩個部分:
- 一個顯示欄位標題的Columns。
- 一個儲存資料的Store 元件。
=== Columns 簡介===
- Columns 用來Grid 的定義表格欄位，是一個具有text 與 dataIndex 屬性的物件陣列。
- 利用text 屬性來決定Grid 的欄位名稱。
- 利用dataIndex 屬性來與Store 的資料相配對。
- Grid 的欄位顯示順序完全由此Columns 加入的順序決定。
=== Store 簡介===
- 用來存取表格的原始資料，可以是近端的二維陣列(Array )，或是遠端的JSON 或XML 資料。
- 利用fields 屬性來與columns 欄位相配對。
- reader 用來解析原始資料，如原始資料格式為json，reader的type 就填json 。
- type 可以是 array, json, xml
先來看看由json 提供近端資料的範例程式:
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'], //利用fields 與Columns 的dataIndex 做配對。
data: {'items': [ //原始資料
{'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224"},
{'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234"},
{'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244"},
{'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json', //reader用來解析原始資料，如原始資料格式為json，reader 的type 就填json 。 #可以是 array, json, xml
root: 'items' //告訴reader 要選擇data 中哪一個含有raw Data 的Array 的物件。
}
}
});
var columnModel = [ ////建立ColumnMode
{text: '名稱', dataIndex: 'name'},
{text: '電子信箱', dataIndex: 'email', flex: 1},
{text: '電話', dataIndex: 'phone'}
];
Ext.create('Ext.grid.Panel', { // 新增Grid
title: 'Grid 範例',
store: store, //將預先寫好的store 填入grid
columns: columnModel, //將預先寫好的columns 填入grid
height: 200,
width: 400,
renderTo: Ext.getBody()
});
===== 取得被選取的 row 資料 =====
var mygrid = Ext.create('Ext.grid.Panel', { // 新增Grid
title: 'Grid 範例',
store: store, /*
新增一個grid...
*/
var selectedRow = mygrid.getSelectionModel().getLastSelected().data; // Object, 取得被選取的那一列 row
// selectedRow.name //取得被選取的那一列的 name 欄位值
// selectedRow.age //取得被選取的那一列的 age 欄位值
// selectedRow.email//取得被選取的那一列的 email欄位值
===== Grid 資料編輯器 =====
Ext.Grid 必須透過官方套件才可以編輯內容，可以在 plugins 屬性載入 Ext.grid.plugin.CellEditing 或 Ext.grid.plugin.RowEditing 便可對 Grid 資料進行編輯。Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{"name":"Lisa", "email":"lisa@simpsons.com", "phone":"555-111-1224"},
{"name":"Bart", "email":"bart@simpsons.com", "phone":"555--222-1234"},
{"name":"Homer", "email":"home@simpsons.com", "phone":"555-222-1244"},
{"name":"Marge", "email":"marge@simpsons.com", "phone":"555-222-1254"}
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{header: 'Name', dataIndex: 'name', editor: 'textfield'}, //再每個欄位加入 editor: 'textfield' ，即可編輯欄位
{header: 'Email', dataIndex: 'email', flex:1,
editor: {
xtype: 'textfield',
allowBlank: false //不允許空白
}
},
{header: 'Phone', dataIndex: 'phone'} //不加入則不允許編輯
],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', { // 加入官方 CellEditing 差件
clicksToEdit: 1 // 按一下進行編輯，預設為按兩下
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
===== 新增一筆資料 =====
使用 store.insert() 方法添入一筆新資料，新資料的欄位必須與 store 的 Fields 一模一樣。function addNewRow()
{
// or Ext.getCmp('your_storeID').insert....
your_store.insert(0, {
RECEIVABLES_LISTNUMBER: Ext.getCmp("ID_text").getValue(),
RECEIVABLES_CATEGORY: null,
RECEIVABLES_AMOUNT: null,
LC_ID: null,
CORRESPONDING_SUBJECT_ID: null,
RECEIVABLES_ACCOUNT: null,
RECEIVABLES_BANK: null,
RECEIVABLES_DATE: null,
BILL_CREDIT_NUMBER: null,
EXPIRY_DATE: null,
PREAGAINST_DATE: null,
BILL_ACCOUNT: null,
BILL_BANK: null,
ANNOTATION: null
});
rowEditing.startEdit(0, 0);
}
===== 利用 renderer處理Cell內容 =====
在對每個 Column 做設定時，可以透過 renderer 來攔截資料，在 Store 載入後， renderer 可以在資料顯示於畫面之前對資料做處理，例如大小寫轉換，中英文轉換等。renderer: 'uppercase'
參數:
value : Object
The data value for the current cell
new Ext.grid.Panel({
id: 'grid_DetailGrid',
flex: 4,
margin: 20,
store: store_DetailGrid,
selType: 'rowmodel',
selModel: {mode: 'MULTI'},
columns: [
{header: ChangeLanguage("Receivables Category"), dataIndex: 'RECEIVABLES_CATEGORY', renderer: function (value) {
return ChangeNumber(value);
}, flex: 1}, // 加入 renderer 屬性，並使用自己事先寫好的 Function 對資料作處理。
{header: ChangeLanguage("Amount"), dataIndex: 'RECEIVABLES_AMOUNT', flex: 1},
{header: ChangeLanguage("L/C ID"), dataIndex: 'LC_ID', flex: 1},
]
});
function ChangeNumber(no)
{
no.trim().toString();
var item;
switch (no) {
case "0":
item = '其他';
break;
case "1":
item = '現金';
break;
case "2":
item = '支票';
break;
}
return item;
}
想了解有關 Renderer 的知識可前往參訪官方文件: Renderer
===== 刪除空的 Row =====
deleteEmptyRow(grid_DetailGrid); // parameter is your Grid
function deleteEmptyRow(grid) {
var store = grid.store;
for (var i = 0; i < store.getCount(); i++)
{
var RECEIVABLES_CATEGORY = store.getAt(i).get("RECEIVABLES_CATEGORY"); // 取得 store Fields 內的"RECEIVABLES_CATEGORY"欄位
if (RECEIVABLES_CATEGORY === null)
{
store.remove(store.getAt(i));
}
}
}
想了解更多Ext.grid 的相關知識，可前往參訪官方文件: Ext.grid.Panel
留言
張貼留言