先週、ExtJS勉強会 に行ってきました。
その中で小堤さんがパフォーマンス向上のテクニックについて
紹介されていたのでそれを試してみました。
内容は･･･
大枠のパネルの中にカラムレイアウトなどでテキストフィールドとか
フォームのアイテムのレイアウトを行う場合は、”container”を指定すると
パフォーマンスが向上する
という内容です。
詳しい内容については、小堤さんのブログで紹介されています。
サンプルソース
ソースは、フォームレイアウトの中にfieldsetを入れて、
さらにカラムレイアウトの中にテキストフィールドを4つ入れたセットを100個配置しているサンプルです。
それぞれ、カラムレイアウトとフォームレイアウトにcontainerを指定する場合と指定しない場合での
描画時間をアラートで表示します。
時間測定ってこんなので良いのだろうか･･･。
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'http://extjs.cachefly.net/ext-3.2.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var start = new Date().getTime();
var form = new Ext.Panel({
renderTo: Ext.getBody(),
title: 'FormPanel - Speed Test2 -',
layout: 'form',
width: 800,
height: 600,
padding: '20',
autoScroll: true,
items: [{
xtype: 'fieldset',
title: 'fieldset',
items: [{
layout: 'column',
xtype: 'container',
items: [{
columnWidth: '.50',
layout: 'form',
xtype: 'container',
items:[{
xtype: 'textfield',
fieldLabel: 'Sample1'
},{
xtype: 'textfield',
fieldLabel: 'Sample2'
}]
},{
columnWidth: '.50',
layout: 'form',
xtype: 'container',
items:[{
xtype: 'textfield',
fieldLabel: 'Sample3'
},{
xtype: 'textfield',
fieldLabel: 'Sample4'
}]
}]
}]
}
・
・
・
});
var end = new Date().getTime();
alert((end-start)/1000);
});
実行結果
containerを指定しない場合
containerを指定した場合
※ブラウザが固まるので注意して下さい！！
Core2 2.0GHzのchromeで7秒くらい違いました。
フィールドを100個も配置する様な画面は無いと思いますが。。。
IE6とか遅い環境だともっと早くなるでしょうね。
それよりもなによりも、ボーダーとか背景とか無駄な描画がされないことが嬉しいです。
フォームアイテムのレイアウトに限らず、Panelの中にPanelを入れたりする場合は多々あるので、
その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。
ExtCoreは、ExtJSの基本クラス群を切り出したライブラリだそうです。
ExtJSはツリーとかタブとかのコンポーネントを使って勉強していましたが
基本クラスについてはさっぱりでした。
ってことで、Ext Coreを使って基本クラスを勉強中です。
Ext Japanのサイトで、ExtCoreのマニュアルが日本語化されています。
Ext Coreのマニュアル
すごい分かりやすいです。
全然時間が取れなくて、1日1時間くらいしか勉強できませんが
少しずつ読み進めていこ。
今回は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
}]
実行結果
Ext.tree.TreePanelのサンプル
Ext.tree.TreeLoaderをTreePanelのプロパティで指定しています。
TreeLoaderでは、取得元URLを指定しています。
TreePanel.jsonでは、Ext.tree.TreeNodeを生成する際のコンフィグを
JSON形式の配列で記載しています。
TreeLoaderが指定されたURLからTreePanel.jsonを取得し、
内部でExt.tree.TreeNodeを展開するノードに追加してくれます。
社内学習の一環として、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);
});
実行結果
Ext.tree.TreePanelのサンプル
上のリンクは、サンプルソースを実際に動かした場合のリンクです。
このサンプルでは、ベタでツリーノードを指定していますが、
TreeLoaderを使ってサーバ側から処理結果を、XMLやJSON形式で受け取ることもできます。
参考
Ext 3.0 API Documentation 日本語版 Ext.tree.TreePanel
