ExtのTree

ツリーサンプル1


Ext 2.0のTreeウィジェットの使い方。

  1. ツリー構造のデータは「あるノードに対応する子ノードのリスト」。子ノードリストは情報を持つURLからJSON形式でその都度取得し、JavaScriptで静的に定義しない。
  2. 子ノードのリストを返すURLは、ノードIDをPOSTするとJSON形式で結果を返すプログラムを設置する。
<html>
<head>
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
    var tree = new Ext.tree.TreePanel({
        el:'tree-div',
        loader: new Ext.tree.TreeLoader({
            dataUrl:'tree_data.cgi'
        })
    });

    // set the root node
    var root = new Ext.tree.AsyncTreeNode({
        text: 'Root',
        id:'root'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
});
</script>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
</head>
<body>
<div id="tree-div" style="height: 200px"></div>
</body>
</html>
  • Ext.tree.TreePanelが木構造を表示する画面領域。あらかじめ作ってある要素のIDを el に指定し、loader に子ノードのデータを取得するURLを引数にしたExt.tree.TreeLoaderを指定する。
  • rootノードは最初に作っておくことが必要。

tree_data.cgiは以下のようになる。

#!/usr/pkg/bin/perl

use CGI;
use JSON::Syck;

my $cgi = new CGI;

my %data_hash = (
    root => [
        { text => 'folder 1', id => 1 , cls => 'folder'},
        { text => 'folder 2', id => 2 , cls => 'folder'},
        { text => 'leaf node', id => 3 , leaf => 1, cls => 'file'},
    ],
    1 => [
        { text => 'child 1', id => 4, leaf => 1, cls => 'file'}
    ],
    2 => [
        { text => 'child 2', id => 5, leaf => 1, cls => 'file'},
        { text => 'child 3', id => 6, leaf => 1, cls => 'file'}
    ]
);
my $node_id = $cgi->param('node') || 'root';

print "Content-Type: text/html\n\n";
print JSON::Syck::Dump($data_hash{$node_id});

「leaf」属性がないと親フォルダになり、クリックしたときに「1」とか「2」を「node」パラメータに指定して
tree_data.cgiにPOSTする。IDは文字列でも良く、例えば「text」と同じにしてしまってもよい。