ExtJS學習筆記（四）使用樹控制元件TreeNode ，TreeLoader
在ExtJS中，不管是葉子節點還是非葉子節點，都統一用TreeNode表表示樹的節點。在ExtJS中，有兩種型別的樹節點。一種節點是普通的簡單樹 節點，由Ext.tree.TreeNode定義，另外一種是需要非同步載入子節點資訊的樹節點，該類由Ext.tree.AsyncTreeNode定 義。 看下面的程式碼：
Ext.onReady(function(){
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:new Ext.tree.AsyncTreeNode({
text:"根節點"
}),
width:100
});
});
執行程式，點選樹中的“根節點”則會一直髮現樹會嘗試載入這個節點的子節點，由這裡沒有指定樹的載入器，所以“根節點”會變成一直處於載入的狀態。如下圖所示：
對於普通的TreeNode來說，可以通過呼叫節點的appendChild、removeChild等方法來往該節點中加入子節點或刪除子節點等操作。
TreeNode與AsyncTreeNode可以同時使用，比如下面的程式碼：
Ext.onReady(function(){
var root=new Ext.tree.TreeNode({
id:"root",
text:"樹的根"
});
var c1=new Ext.tree.TreeNode({
text:"子節點1"
})
var c2=new Ext.tree.AsyncTreeNode({
text:"子節點2"
});
root.appendChild(c1);
root.appendChild(c2);
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:300,
loader:new Ext.tree.TreeLoader({
applyLoader:false,
url:"treedata.js"
})
});
});
treedata.js中的內容仍然是：
[{
id: 1,
text: '子節點'
}]
執行上面的程式可以得到一棵如下圖所示的樹：
另外要在樹以外的程式中得到當前選擇的節點，可以通過TreePanel的getSelectionModel方法來獲得，該方法預設返回的是 Ext.tree.DefaultSelectionModel物件，DefaultSelectionModel的getSelectedNode方法 返回當前選擇的樹節點。比如要得到樹tree中中當前選擇節點，程式碼如下：
對於普通的TreeNode來說，可以通過呼叫節點的appendChild、removeChild等方法來往該節點中加入子節點或刪除子節點等操作。
TreeNode與AsyncTreeNode可以同時使用，比如下面的程式碼：
執行上面的程式可以得到一棵如下圖所示的樹：
另外要在樹以外的程式中得到當前選擇的節點，可以通過TreePanel的getSelectionModel方法來獲得，該方法預設返回的是 Ext.tree.DefaultSelectionModel物件，DefaultSelectionModel的getSelectedNode方法 返回當前選擇的樹節點。比如要得到樹tree中中當前選擇節點，程式碼如下：
對於ExtJS中的樹來說，樹載入器TreeLoader是一個比較關鍵的部件，樹載入器由Ext.tree.TreeLoader類定義，只有AsyncTreeNode才會使用TreeLoader。看下面的程式碼：
Ext.onReady(function(){
var loader=new Ext.tree.TreeLoader({
url:"treedata.js"
});
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"根節點",
loader:loader});
var tree=new Ext.tree.TreePanel({
renderTo:"hello",
root:root,
width:100
});
});
首先我們使用Ext.tree.TreeLoader來初始化了一個TreeLoader物件，構造
函式中的配置引數url表示獲得樹節點資訊的url。然後在初始化根節點的時候我們使用的是AsyncTreeNode，在該節點中指定該節點的
laoder為前面定義的loader。執行這段程式，在點選“根節點”時，會從伺服器端指定root節點的子節點資訊。
TreeLoader嚴格來說是針對樹的節點來定義的，可以給樹中的每一個節點定義不同的TreeLoader，預設情況下，如果一個
AsyncTreeNode節點在準備載入子節點的時候，如果該節點上沒有定義loader，則會使用TreePanel中定義的loader作為載入
器。因此，我們可以直接在TreePanel上面指定loader屬性，這樣就不需要給每一個節點指定具體的TreeLoader了。