Ext.tree.TreePanel

Ext.js

TreePanelの使い方のメモです。

基本的な使い方

Ext JS 2.2 Samples: Reorder TreePanel

    var tree = new Ext.tree.TreePanel({
        el:'tree-div',
        useArrows:true,
        autoScroll:true,
        animate:true,
        enableDD:true,
        containerScroll: true,

        // dataUrlからTreeLoaderを自動で生成する
        dataUrl: 'get-nodes.php',
        
        // 明示的にTreeLoaderを指定する場合
        // loader: new Ext.tree.TreeLoader({//....}) 
        // or
        // loader: myloader

        // ルートノード
        root: {
            nodeType: 'async', // 非同期で読み込む
            text: 'Ext JS',
            draggable:false,
            id:'source'
        }
    });

    // ツリーを描画する
    tree.render();
   
    // ルートノードを展開する
    tree.getRootNode().expand();

TreePanelは、コンフィグオプションのdataUrlで指定したURLからJSON形式のデータを受け取ってツリーを生成します。

ノードの展開

ノードを展開すると、dataUrlで指定したURLに、node="展開したノードのid"というパラメータ付きのリクエストが発生し、レスポンスデータを元に子ノードが描画されます。リクエストに別のパラメータを含めたい場合には、TreePanelのコンフィグオプションloaderに明示的に生成したTreeLoaderを指定し、

var myloader = new Ext.tree.TreeLoader({//...});
myloader.on("beforeload", function(treeLoader, node) {
    // ノードがクリックされたら、パラメータcategoryとしてノードのcategoryの値を送る
    this.baseParams.category = node.category ;
});

のように、TreeLoaderのbeforeloadイベントのイベントリスナにて、baseParamsに任意のパラメータを追加します。

ノードの描画に使用されるデータ形式

例として、サンプルページで使用されるJSONデータを見ると以下のようになっています。

[
    {
        text: build
        ,id: /build
        ,cls: folder
    },{
        text: INCLUDE_ORDER.txt 
        ,id: /INCLUDE_ORDER.txt
        ,leaf: true
        ,cls: file
    }
    // ...略  
]

この配列の個々のハッシュが、ノード生成時のコンフィグオプションとして使用されます。例えばtextの値が、がツリーのノードに表示されます。どのようなコンフィグオプションがあるかはTreeNodeのAPIを参照。

サーバサイドでTreeNodeのコンフィグオプションにあわせたJSONデータを生成できない場合には、TreeLoaderを継承したクラスを定義してcreateNodeをオーバーライドすることで、対応することができます。

Ext.extend(MyTreeLoader, Ext.tree.TreeLoader,{
     createNode: function(attr){
        // もっと汎用的に作ったほうがいいですが、
        attr.text = attr.name; //テキストにnameの値を使用する
        attr.iconCls = 'icon-' + attr.type;  // アイコンのCSSクラスの値を指定する

        return MyTreeLoader.superclass.createNode.call(this, attr);
     }
});

var myloader = new MyTreeLoader({//...})

これは別のよい方法があるかもしれませんがとりあえずということで。

ルートノード

ルートノードは必ず１つ必要で、コンフィグオプションの rootVisibleをfalseにすることで、ルートノードを表示しないようにすることも可能です。