10月 28TH, 2008
By ISPERN
By ISPERN
Ext JS -Ext.tree.TreePanel-
社内学習の一環として、Ext JSを使って掲示板を作成しています。
メモレベルですが、備忘録として残しておきたいと思います。
まずは、Ext.tree.TreePanelです。
Ext.tree.TreePanelでは、ツリービューを表示するためのクラスです。
TreePanel1.html
<html> <!-- head --> <head> <!-- content-type --> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <!-- /content-type --> <!-- Title --> <title>ExtJS Examples - TreePanel1 -</title> <!-- /Title --> <!-- Ext JS --> <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.0/resources/css/ext-all.css" /> <!-- /Ext JS --> <!-- Ext JS --> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/adapter/ext/ext-base.js" charset="utf-8"></script> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/ext-all.js" charset="utf-8"></script> <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.0/src/locale/ext-lang-ja.js" charset="utf-8"></script> <!-- /Ext JS --> <!-- App --> <script type="text/javascript" src="../../src/Panel/TreePanel1.js" charset="utf-8"></script> <!-- /App --> </head> <!-- /head --> <!-- body --> <body style="margin: 20 0 0 30;"> </body> <!-- /body --> </html>
TreePanel1.js
Ext.onReady( function() {
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
// rootのツリーノードを生成
var root = new Ext.tree.AsyncTreeNode({
text: 'forum',
leaf: false
});
var treePanel = new Ext.tree.TreePanel({
title: 'Tree Panel', // PanelのTitleを指定
renderTo: Ext.getBody(), // 表示する要素を指定
width: 225, // 幅
height: 200, // 高さ
minSize: 150, // 最小の幅
maxSize: 300, // 最大の幅
rootVisible: false, // rootのツリーノードを表示するか
root: root // rootのツリーノードを指定
});
// 子ノードを生成
var node1 = new Ext.tree.TreeNode({
text: 'thread1',
leaf: true
});
var node2 = new Ext.tree.TreeNode( {
text: 'thread2',
leaf: true
});
var node3 = new Ext.tree.TreeNode( {
text: 'thread3',
leaf: true
});
// 生成した子ノードをrootノードに追加
root.appendChild(node1);
root.appendChild(node2);
root.appendChild(node3);
});
実行結果
上のリンクは、サンプルソースを実際に動かした場合のリンクです。
このサンプルでは、ベタでツリーノードを指定していますが、
TreeLoaderを使ってサーバ側から処理結果を、XMLやJSON形式で受け取ることもできます。
参考
Tags: Ext JS, JavaScript
