ツリービューを作成し表示する

説明

ツリービューを作成し表示するにはExt.tree.TreePanel()を使います。パラメータにツリービューに必要なデータと情報を指定します。ツリービューに表示される項目は展開時に読み込みが行われます。ルートディレクトリを指定するにはnew Ext.tree.AsyncTreeNode()を使い、textプロパティにルートフォルダの名前、idプロパティにID名を指定します。展開時に内容を読み込ませるにはloaderにnew Ext.tree.TreeLoader()を使ってデータを読み込むURLを指定します。このURLが静的で同じ場合にはフォルダ内にフォルダが展開されますので、通常はPHPなどのURLを指定し必要なデータを送信する必要があります。また、読み込まれるツリーデータは配列形式で、配列要素はプロパティリスト形式で指定します。textプロパティにフォルダ／ファイルの名前、idにエレメントのID、leafにフォルダなのかファイルなのかを指定します（アイコンも指定できます）。leafがfalseの場合はフォルダになり、trueであればファイル（末端）になります。生成しただけでは表示されないのでツリーオブジェクトのrender()メソッドを呼び出してページ上に描画を行います。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="../../../lib/resources/css/ext-all.css" type="text/css" media="all">
<link rel="stylesheet" href="../../../lib/resources/css/main.css" type="text/css" media="all">
<script type="text/javascript" src="../../../lib/js/ext-base.js"></script>
<script type="text/javascript" src="../../../lib/js/ext-all.js"></script>
<script type="text/javascript"><!--
Ext.EventManager.on(window, 'load', function(){
var xTree = new Ext.tree.TreePanel({
renderTo : 'treeView',
width : 400,
height: 300,
autoScroll : true,
animate : true,
root : new Ext.tree.AsyncTreeNode({
text : '素材集',
draggable : false,
id : 'tree01'
}),
loader : new Ext.tree.TreeLoader({
dataUrl : 'tree01.txt'
})
});
xTree.on('beforeload', function(treeLoader, node){
xTree.loader.dataUrl = 'spring.txt';
});
xTree.render();
});
// --></script>
</head>
<body>
<h1>ツリーメニュー</h1>
<div id="treeView"></div>
</body>
</html>

■tree01.txt
[
{text : "春の素材", id : "spring", leaf:false},
{text : "夏の素材", id : "summer", leaf:true},
{text : "秋の素材", id : "autumn", leaf:true},
{text : "冬の素材", id : "winter", leaf:true},
{text : "使用上の注意", id : "readme", leaf:true},
{text : "サポート", id : "support", leaf:true}
]

■spring.txt
[
{text : "春の素材", id : "spring", leaf:false,
children: [
{ text: '桜', id:'sakura', leaf:true }
]
},
{text : "夏の素材", id : "summer", leaf:true},
{text : "秋の素材", id : "autumn", leaf:true},
{text : "冬の素材", id : "winter", leaf:true},
{text : "使用上の注意", id : "readme", leaf:true},
{text : "サポート", id : "support", leaf:true}
]
サンプルを実行
[戻る]