在開(kāi)發(fā)web應(yīng)用時(shí)，表格是一個(gè)非常基礎(chǔ)的功能。在數(shù)據(jù)量比較大的情況下，用JSON來(lái)描述表格數(shù)據(jù)是一種比較方便的方式。而ext表格是在web開(kāi)發(fā)中常用的組件框架，支持從JSON數(shù)據(jù)創(chuàng)建表格。

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()
});

在上面的代碼中，我們可以看到一個(gè)典型的ext表格創(chuàng)建方式。其中比較關(guān)鍵的部分是store，這里我們通過(guò)Ext.create('Ext.data.Store', {})來(lái)創(chuàng)建一個(gè)數(shù)據(jù)倉(cāng)庫(kù)。fields用來(lái)描述數(shù)據(jù)表格中有哪些列，data則是表格中的數(shù)據(jù)。

在列描述中，text用來(lái)描述列的名稱，dataIndex用來(lái)描述列的數(shù)據(jù)屬性名稱，flex則用來(lái)控制列的寬度。

最后我們可以通過(guò)renderTo將表格渲染到頁(yè)面上。當(dāng)然，在實(shí)際開(kāi)發(fā)中我們需要通過(guò)ajax獲取數(shù)據(jù)后再創(chuàng)建表格。