Free Writing

11月 30TH, 2008
By ISPERN

Ext JS – Ext.tree.TreePanel その2 -

今回はTreePanelに表示するTreeNodeをサーバからJSON形式で取得するサンプルです。

TreePanel2.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 - TreePanel2 -</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/TreePanel2.js" charset="utf-8"></script>
		<!-- /App -->
	</head>
	<!-- /head -->
	<!-- body -->
	<body style="margin: 20 0 0 30;">
	</body>
	<!-- /body -->
</html>

TreePanel2.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のツリーノードを指定
		loader: new Ext.tree.TreeLoader({
			url: '../../data/TreePanel.json'	// 取得元URLを指定
		})
	});
});

TreePanel.json

[{
	text: 'friend',
	leaf: false,
	children: [{
		text: 'taro',
		leaf: true
	},{
		text: 'hanako',
		leaf: true
	},{
		text: 'jiro',
		leaf: true
	}]
},{
	text: 'work',
	leaf: true
}]