ExtJS 4中的tree組件是一個非常有用的工具，能夠讓用戶進行便捷的目錄導(dǎo)航。在使用tree組件時，我們通常會使用JSON數(shù)據(jù)來渲染樹型結(jié)構(gòu)。

JSON數(shù)據(jù)是一種輕量級的數(shù)據(jù)交換格式，在web開發(fā)中被廣泛使用。對于ExtJS 4 tree組件來說，我們需要將JSON數(shù)據(jù)轉(zhuǎn)換為指定的數(shù)據(jù)結(jié)構(gòu)，才能被正確地渲染成樹型結(jié)構(gòu)。下面是一個典型的JSON數(shù)據(jù)示例：

[
{
"text": "Parent node", //節(jié)點顯示的文本
"expanded": true, //節(jié)點展開或折疊的狀態(tài)
"children": [ //子節(jié)點數(shù)組
{
"text": "Child node 1",
"leaf": true //是否是葉子節(jié)點
},
{
"text": "Child node 2",
"leaf": true
}
]
}
]

需要注意的是，JSON數(shù)據(jù)中每個節(jié)點都應(yīng)該包含text屬性來顯示節(jié)點的文本信息。同時，節(jié)點的展開或折疊狀態(tài)由expanded屬性控制，而是否是葉子節(jié)點則需要使用leaf屬性進行標記。在配置tree組件時，我們需要將JSON數(shù)據(jù)轉(zhuǎn)換為指定的數(shù)據(jù)結(jié)構(gòu)。下面是一個典型的ExtJS 4 tree組件的數(shù)據(jù)結(jié)構(gòu)示例：

Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root node',
expanded: true,
children: [ {
text: "Child node 1",
leaf: true
}, {
text: "Child node 2",
leaf: true
}]
}
});

在配置ExtJS 4 tree組件數(shù)據(jù)時，我們需要使用TreeStore來包裝JSON數(shù)據(jù)，同時將root節(jié)點作為整個數(shù)據(jù)結(jié)構(gòu)的根節(jié)點。接下來，將子節(jié)點添加到root節(jié)點中，就可以輕松地完成整個數(shù)據(jù)結(jié)構(gòu)的搭建。對于組件配置中tree節(jié)點的children屬性，我們可以設(shè)置為url，表明數(shù)據(jù)來源是外部的JSON數(shù)據(jù)，這樣就可以使數(shù)據(jù)和視圖分離，實現(xiàn)更好的代碼模塊化。