Posts tagged: Ext JS

0 RESPONSES comments
5月 27TH, 2010
By ISPERN

xtypeにcontainerを指定した場合の描画速度

先週、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を入れたりする場合は多々あるので、
その時にボーダーが重なったりしないのは嬉しいです。
まさに一石二鳥。

Tags: ,

categories Ext JS, JavaScript

0 RESPONSES comments
4月 17TH, 2009
By ISPERN

Ext Core3.0を勉強中

ExtCoreは、ExtJSの基本クラス群を切り出したライブラリだそうです。

ExtJSはツリーとかタブとかのコンポーネントを使って勉強していましたが

基本クラスについてはさっぱりでした。

ってことで、Ext Coreを使って基本クラスを勉強中です。

Ext Japanのサイトで、ExtCoreのマニュアルが日本語化されています。

Ext Coreのマニュアル

すごい分かりやすいです。

全然時間が取れなくて、1日1時間くらいしか勉強できませんが

少しずつ読み進めていこ。

Tags:

categories Ext JS

3 RESPONSES comments
2月 15TH, 2009
By ISPERN

EclipseでExtJSのAPIを補完する

ExtJSのソースコードのフォルダに、「ext.jsb」というファイルがありますが

Eclipseでこのファイルを読み込むことで、ExtJSのAPIを補完することができます。

ext.jsbを読み込むには、Spket IDEというプラグインを利用します。

Spket IDEについては、ここに詳しく載っていました。

Spket IDEはスタンドアロンとプラグインどちらでも動作が可能です。

私の環境には既にEclipse環境があるのでプラグインの方を利用しました。

利用方法

1.インストール

Eclipseのソフトウェア更新より「http://www.spket.com/update」のURLを追加して

プラグインをインストールします。

プラグインは、このページからもダウンロードできます。

2.JavaScriptプロファイルの作成

以下の流れで、ExtJSのプロファイルを作成します。

  • 「ウィンドウ」→「設定」で設定ウィンドウを開く。
  • 設定ウィンドウの「Spket」→「JavaScript Profiles」を選択。
  • 「新規(N)…」ボタンをクリックし、適当な名前で新規にJavaScriptプロファイルを作成。
  • 作成したプロファイルを選択し、「ライブラリの追加(B)」ボタンをクリック。
  • 「ライブラリ(L)」のプルダウンより「ExtJS」を選択し、「OK」ボタンをクリック。
  • 追加されたExtJSのライブラリを選択し、「ファイルの追加(F)」ボタンをクリック。
  • ExtJSのsourceフォルダにある「ext.jsb」ファイルを選択する。
  • 選択後、「OK」ボタンをクリック。

これで、「Spket JavaScript Editor」でJavaScriptファイルを編集するときにExtJSのAPIが補完されます。

AptanaにもExtJSを補完するプラグインがありましたが、Spket IDEのJavascript editorの方が使いやすかったです。

Tags: ,

categories JavaScript

0 RESPONSES comments
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
}]

実行結果

Ext.tree.TreePanelのサンプル

Ext.tree.TreeLoaderをTreePanelのプロパティで指定しています。
TreeLoaderでは、取得元URLを指定しています。

TreePanel.jsonでは、Ext.tree.TreeNodeを生成する際のコンフィグを
JSON形式の配列で記載しています。
TreeLoaderが指定されたURLからTreePanel.jsonを取得し、
内部でExt.tree.TreeNodeを展開するノードに追加してくれます。

Tags: ,

categories Ext JS, JavaScript

0 RESPONSES comments
10月 28TH, 2008
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);

});

実行結果

Ext.tree.TreePanelのサンプル

上のリンクは、サンプルソースを実際に動かした場合のリンクです。
このサンプルでは、ベタでツリーノードを指定していますが、
TreeLoaderを使ってサーバ側から処理結果を、XMLやJSON形式で受け取ることもできます。

参考


Ext 3.0 API Documentation 日本語版 Ext.tree.TreePanel

Tags: ,

categories Ext JS, JavaScript