Extjs 4為我們提供了非常方便的Tree組件，同時也支持通過JSON格式的數據來渲染Tree。下面我們就來看看如何使用Extjs 4 Tree JSON。

首先，我們需要準備一個JSON格式的數據，該數據可以從后端接口中獲取，也可以寫在前端JS文件中：

var treeData = {
text: "Root",
children: [{
text: "Folder1",
children: [{
text: "File1",
leaf: true
}, {
text: "File2",
leaf: true
}]
}, {
text: "Folder2",
children: [{
text: "File3",
leaf: true
}, {
text: "Folder3",
children: [{
text: "File4",
leaf: true
}]
}]
}]
};

上述JSON數據中，根節點為"Root"，下轄兩個子節點"Folder1"和"Folder2"，"Folder1"下面有兩個葉子節點"File1"和"File2"，"Folder2"下面有一個葉子節點"File3"和一個子節點"Folder3"，"Folder3"下面還有一個葉子節點"File4"。

接下來就可以使用Extjs 4 Tree構件來渲染這個JSON數據。代碼如下：

Ext.create('Ext.tree.Panel', {
renderTo: Ext.getBody(),
rootVisible: false,
store: Ext.create('Ext.data.TreeStore', {
root: treeData
})
});

代碼中，我們使用Ext.tree.Panel構造器創建了一個Tree組件，指定它渲染到頁面的body中，并將根節點設置為不可見。

接下來，我們創建了一個Ext.data.TreeStore的Store，將上述JSON數據傳入作為根節點，并將該Store設置為Tree組件的數據源。

運行以上代碼即可呈現一棵完整的樹形結構，鼠標在節點上方懸停時會出現節點名稱的提示信息，點擊葉子節點時會觸發click事件，可以編寫事件處理程序實現自己的邏輯。

綜上，使用Extjs 4 Tree JSON非常方便，只需準備好JSON數據和相應的Extjs配置即可快速構建樹形結構。