在開發web應用時,表格是一個非常基礎的功能。在數據量比較大的情況下,用JSON來描述表格數據是一種比較方便的方式。而ext表格是在web開發中常用的組件框架,支持從JSON數據創建表格。
Ext.create('Ext.grid.Panel', {
title: 'Simple JSON Grid',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [
{ name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
{ name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
{ name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
{ name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
]
}),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
renderTo: Ext.getBody()
});
在上面的代碼中,我們可以看到一個典型的ext表格創建方式。其中比較關鍵的部分是store,這里我們通過Ext.create('Ext.data.Store', {})來創建一個數據倉庫。fields用來描述數據表格中有哪些列,data則是表格中的數據。
在列描述中,text用來描述列的名稱,dataIndex用來描述列的數據屬性名稱,flex則用來控制列的寬度。
最后我們可以通過renderTo將表格渲染到頁面上。當然,在實際開發中我們需要通過ajax獲取數據后再創建表格。