在前端開(kāi)發(fā)中，經(jīng)常需要使用到Json數(shù)據(jù)格式，Json是JavaScript Object Notation的縮寫(xiě)，是一種輕量級(jí)的數(shù)據(jù)交互格式，易于閱讀和編寫(xiě)。而在extjs開(kāi)發(fā)中，也經(jīng)常需要用到Json數(shù)據(jù)來(lái)實(shí)現(xiàn)數(shù)據(jù)的讀取和展示。
下面我們來(lái)看一下在extjs中如何使用Json數(shù)據(jù)。

首先我們需要定義一個(gè)Json數(shù)據(jù)對(duì)象，例如：

var data = {
"users": [{
"id": "1",
"name": "張三",
"age": 18
},
{
"id": "2",
"name": "李四",
"age": 20
},
{
"id": "3",
"name": "王五",
"age": 22
}
]
};

上面的數(shù)據(jù)對(duì)象中包含了一個(gè)名為users的數(shù)組，數(shù)組中元素為對(duì)象，每個(gè)對(duì)象包含了id、name和age三個(gè)屬性。

接下來(lái)我們需要定義一個(gè)數(shù)據(jù)模型，以便在數(shù)據(jù)加載時(shí)能夠正確地解析Json對(duì)象。例如：

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
},
{
name: 'name',
type: 'string'
},
{
name: 'age',
type: 'int'
}
]
});

以上定義了一個(gè)名為User的數(shù)據(jù)模型，包含了id、name和age三個(gè)屬性，屬性的類型分別為整型和字符串。

最后我們需要使用Ext.data.Store來(lái)加載和展示Json數(shù)據(jù)。例如：

var store = Ext.create('Ext.data.Store', {
model: 'User',
data: data.users,
proxy: {
type: 'memory'
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
store: store,
height: 200,
width: 300,
columns: [{
text: 'ID',
dataIndex: 'id'
},
{
text: '姓名',
dataIndex: 'name'
},
{
text: '年齡',
dataIndex: 'age'
}
]
});

以上代碼定義了一個(gè)名為store的數(shù)據(jù)倉(cāng)庫(kù)，用于加載和展示Json數(shù)據(jù)，指定了數(shù)據(jù)模型、數(shù)據(jù)源和代理類型。之后定義了一個(gè)名為grid的表格，指定數(shù)據(jù)倉(cāng)庫(kù)和列信息，用于展示Json數(shù)據(jù)。

在extjs中，使用Json數(shù)據(jù)非常方便，只需要定義好數(shù)據(jù)對(duì)象、數(shù)據(jù)模型和數(shù)據(jù)倉(cāng)庫(kù)即可快速地加載和展示數(shù)據(jù)。