extjs - Ext.tree.TreePanel 簡介

Ext.tree.TreePanel繼承自Ext.Panel，算是個container，必須給予節點(node)才能形成完整的樹。也就是說在render之前必須設定好root這個node。

空的樹(直接用renderTo())

Ext.onReady(function() {
    var root = new Ext.tree.TreeNode({
        id: "root",
        text:'B_root'
    });
    root.appendChild(new Ext.tree.TreeNode({
        id: 'c1',
        text: 'B_C1'
    }));

    var tree = new Ext.tree.TreePanel({
        renderTo: 't', //要有個div的id為't'
        width: 150,
        height: 50,
        root: root
    });
});

或者(用el+render())

Ext.onReady(function() {
    var root = new Ext.tree.TreeNode({
        id: "root",
        text:'B_root'
    });
    root.appendChild(new Ext.tree.TreeNode({
        id: 'c1',
        text: 'B_C1'
    }));

    var tree = new Ext.tree.TreePanel({
        el: 't', //要有個div的id為't'
        width: 150,
        height: 50,
        root: root
    });
    tree.render();
});

利用setRootNode設定Root

Ext.onReady(function() {
    var root = new Ext.tree.TreeNode({
        id: "root",
        text:'B_root'
    });

    root.appendChild(new Ext.tree.TreeNode({
        id: 'c1',
        text: 'B_C1'
    }));

    var tree = new Ext.tree.TreePanel({
        el: 't', //要有個div的id為't'
        width: 150,
        autoHeight: true // 自動調整高度
    });
    tree.setRootNode(root);
    tree.render();
});

如果想動態變動root請參考https://extjs.net/forum/showthread.php?p=217227#post217227

可以利用Ext.tree.AsyncTreeNod定義樹狀結構，程式碼如下：

Ext.onReady(function() {
    var root = new Ext.tree.AsyncTreeNode({
        id: 'aRoot',
        text: 'root',
        children: [
            {id: 1, text: 'A leaf Node', leaf: true},
            {id: 2, text: 'A folder Node', children: [
                {id: 3, text: 'A child Node', leaf: true}]
            }
        ]
    });
    var tree = new Ext.tree.TreePanel({
        el: 't', //要有個div的id為't'
        width: 150,
        autoHeight: true,
        root: root
    });
    tree.render();
});

記得如果是樹葉，記得要設定leaf:true，否則會認為不是leaf所以一直處於讀取狀態。

expandPath( String path, [String attr], [Function callback] ) : void
展開TreePanel中特定的路徑，比如我們要展開id2的id3：

Ext.onReady(function() {
    var root = new Ext.tree.AsyncTreeNode({
        id: 'aRoot',
        text: 'root',
        children: [
            {id: 1, text: 'A leaf Node', leaf: true},
            {id: 2, text: 'A folder Node', children: [
                {id: 3, text: 'A child Node', leaf: true}]
            }
        ]
    });
    var tree = new Ext.tree.TreePanel({
        el: 't', //要有個div的id為't'
        width: 150,
        autoHeight: true,
        root: root
    });
    tree.render();
    tree.expandPath('/aRoot/2/3');
});

selectPath( String path, [String attr], [Function callback] ) : void
選擇特定路徑上的node，用法和expandPath相同。

Ext.onReady(function() {
    var root = new Ext.tree.AsyncTreeNode({
        id: 'aRoot',
        text: 'root',
        children: [
            {id: 1, text: 'A leaf Node', leaf: true},
            {id: 2, text: 'A folder Node', children: [
                {id: 3, text: 'A child Node', leaf: true}]
            }
        ]
    });
    var tree = new Ext.tree.TreePanel({
        el: 't', //要有個div的id為't'
        width: 150,
        autoHeight: true,
        root: root
    });
    tree.render();
    tree.selectPath('/aRoot/2/3');
});

除了上述的建構方式，Ext.tree.TreeLoader也提供透過URL讀取JSON file來建構tree。JSON file(tree.json)如下：

[{
    id: 1,
    text: 'A leaf Node',
    leaf: true
  },{
    id: 2,
    text: 'A folder Node',
    children: [{
      id: 3,
      text: 'A child Node',
      leaf: true
    }]
  }]

leaf屬性會在load的時候，判斷是否要在遞迴產生子節點。而原本的Ext.tree.TreeNode並不支援Ajax，所以也要改成Ext.tree.AsyncTreeNode.程式碼如下。

Ext.onReady(function() {
    var root = new Ext.tree.AsyncTreeNode({text: 'root'});
    var tree = new Ext.tree.TreePanel({
        el: 't',
        width: 150,
        autoHeight: true,
        root: root,
        loader: new Ext.tree.TreeLoader({dataUrl: 'tree.json'})
    });
    tree.render();
});