Ext Grid是一款功能強(qiáng)大的JavaScript表格控件，可以讓開(kāi)發(fā)人員輕松地實(shí)現(xiàn)各種表格展示和數(shù)據(jù)操作。而將靜態(tài)JSON數(shù)據(jù)展示在Ext Grid中也是開(kāi)發(fā)中常見(jiàn)的需求，下面我們來(lái)看一下如何實(shí)現(xiàn)。

Ext.onReady(function() {
// 靜態(tài)JSON數(shù)據(jù)
const data = [
{"id": 1, "name": "張三", "age": 18},
{"id": 2, "name": "李四", "age": 20},
{"id": 3, "name": "王五", "age": 22},
{"id": 4, "name": "趙六", "age": 24},
{"id": 5, "name": "錢七", "age": 26}
];
// 創(chuàng)建Ext Grid
const grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
width: 500,
height: 300,
store: Ext.create('Ext.data.Store', {
fields: ['id', 'name', 'age'], // 列模型
data: data // 數(shù)據(jù)源
}),
columns: [
{header: 'ID', dataIndex: 'id'},
{header: '姓名', dataIndex: 'name'},
{header: '年齡', dataIndex: 'age'}
]
});
});

上面的代碼就是一個(gè)簡(jiǎn)單的靜態(tài)JSON數(shù)據(jù)展示的例子，我們首先定義了一個(gè)靜態(tài)的JSON數(shù)據(jù)，然后創(chuàng)建了一個(gè)Ext Grid對(duì)象，并將靜態(tài)數(shù)據(jù)賦值給其數(shù)據(jù)源。最后，定義了三個(gè)列模型和表頭，并通過(guò)columns屬性將其添加到Grid中。

當(dāng)然，在實(shí)際開(kāi)發(fā)中，我們往往需要從后端獲取動(dòng)態(tài)數(shù)據(jù)，并展示在Ext Grid中。這時(shí)，我們可以通過(guò)Ext.Ajax請(qǐng)求獲取數(shù)據(jù)，并將其轉(zhuǎn)換為Ext.data.Store所需的格式，再將其賦值給Grid的數(shù)據(jù)源即可。