- 2008/7/29 火曜日 18:57:00
- Ext | JavaScript
２００８年７月２９日に開催された、第二回ExtJS勉強会で使用した内容を記載します。
※追記
本日は、ありがとうごいました。何から説明していいかわからず、手探りで資料作っていっています。
次回、次々回と少しづつ進めていきたいと思います。
本日参加された方で、名刺交換させていただいていない方で連絡したいという方は、kotsutsumi@xenophy.comにメールください。ExtJS勉強会でとか書いてくれれば、メール捨てません（笑
開発環境
- ブラウザ：FireFox 3.0.1
- デバッガー：FireBug
- エディタ：好きなもの
ExtJSを使用するために読み込むファイル
- ext-all.css
- ext-base.js
- ext-all.js
１．ベースとなるHTMLを作成する
<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”ja” xml:lang=”ja”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><!– ExtJS CSS読み込み –>
<link rel=”stylesheet” type=”text/css” href=”./common/styles/ext-all.css” /><!– ExtJS Script読み込み –>
<script type=”text/javascript” src=”./common/scripts/ext/ext-base.js”></script>
<script type=”text/javascript” src=”./common/scripts/ext/ext-all.js”></script><script type=”text/javascript” src=”./common/scripts/app.js”></script>
</html>
ExtJSを使ったプログラムは、app.jsに記述することにします。
２．アプリケーションの開始
ExtJSは、onReadyイベントハンドラを記述することで、JavaScriptおよびHTML全体が読み込み終わったあとに処理を走らせることが可能です。
通常JavaScriptは、読み込まれた（記述された）タイミングで実行されてしまうため、bodyタグのonloadを記述すなどして対応していた経験がある方もいらっしゃると思います。
ExtJSでは、OnReadyがアプリケーション開始のタイミングになります。
（もちろん部分的にExtJSを使用する際に、必ずしもonReadyイベントを記述する必要はありません。）
Ext.onReady(function(){
});
３．レイアウトを作成する
ExtJSには、最初からいくつかのレイアウトが用意されています。
このレイアウトとは、ExtJSで画面を構成する際に、どのようにレイアウトを行うかを決定するものです。
ExtJSでレイアウトすることができる例は、本家のレイアウトブラウザサンプルで確認することができます。
さらに、今回は画面全体をExtJSで覆ってしまうためにExt.Viewportというクラスをしようします。
Ext.onReady(function(){
new Ext.Viewport({
layout: ‘border’,
title: ‘ExtJS勉強会サンプル’,
items: [{
region: 'north',
height: 100,
title: "北"
},
{
region: 'west',
width: 100,
split: true,
title: "西"
},
{
region: 'center',
title: "中央"
},
{
region: 'east',
width: 100,
split: true,
title: "東"
},
{
region: 'south',
height: 100,
title: "南"
}],
renderTo: Ext.getBody()
});});
Viewportの中に作成されたBorderレイアウトは、北、南、西、東、中央という５カ所のペインを形成することでできます。Borderレイアウトは、必ず中央のパネルが必要になります。
各領域は、regionで指定することができ、それぞれnorth,south,west,east,centerで指定を行います。
上記の例では、すべてのペインを表示しているとともに、西、東の領域は、スプリットバーが表示され、サイズを調整することができるようになっています。
４．アプリケーションのためのクラス設計
上記までで、見た目の領域もできたことですし、onReadyに次々記述していけばExtJSでアプリケーションが作っていける準備はできた気になりました。
しかし、この状態で開発を進めていくと、ものすごくソースコードが汚くなるのと、何がどこで行われているのか、わけがわからなくなってくること必至です。
アプリケーションのメインクラスを作る
ExtJSでクラスを作成する際には、Ext.util.Observableを継承します。
JavaScirptでクラスを作成する場合、言語としてクラスの概念はありませんが、プロトタイプ型として
クラスを作成することが可能です。
しかし、ExtJSではExt.util.Observableを継承することで、そのほかのイベントなどいろいろな便利な機能を利用することが可能になりますので、ここでは、Ext.util.Observableを継承したクラスの作成方法を提示します。
名前空間の定義
その前に、アプリケーションを構築していく前に、名前空間を考えていきます。
名前空間（namespace）に関しては、WEB上の情報などを参考にしてください。
ExtJSを読み込んだ時点で、Extオブジェクトは存在するので、ここにExt.appという名前空間を定義します。
// 名前空間定義
Ext.ns( ‘Ext.app’ );
これで、Ext.appというオブジェクトが作成されます。今後クラス定義は、この名前空間（オブジェクト）に定義していくことにします。
Ext.app.App = function( cfg ){
// コンフィグ適用
Ext.apply( this, cfg );};
Ext.extend(Ext.app.App, Ext.util.Observable, {
});
はじめの、Ext.app.App = ・・・の関数内が、Ext.app.Appクラスのコンストラクタになります。つまり、Ext.app.Appクラスがnewされた時に呼び出される処理です。
すでに、Ext.apply( cfg );という処理が記述されていますので、これは、newするときにコンフィグオプションを引数として定義し、そのコンフィグオブジェクトを反映するための処理です。
Ext.Panelなどほかのウィジットなどをしたことがあれば、newするときの引数や、レイアウト時のitemsオブジェクトに、設定するときに記述するコンフィグオプションがあることを知っているでしょう。
Ext.applyは、そのように外部で指定されたコンフィグオプションを適用することができます。
次に、Ext.extendです。こいつで、Ext.app.AppはExt.util.Observableを継承するここができます。
第一引数は、サブクラスオブジェクト、第二引数は基底クラスオブジェクト、第三引数は、追加やオーバーライドするメソッドオブジェクトになります。
さらに、下記のようにすることで、親クラスのコンストラクタを呼び出すことが可能です。
Ext.app.App = function( cfg ){
// コンフィグ適用
Ext.apply( this, cfg );// 親コンストラクタ呼び出し
Ext.app.App.superclass.constructor.call(this, {
});};
Ext.extend(Ext.app.App, Ext.util.Observable, {
});
Ext.app.App.superclass.constructor.call( thisオブジェクト, コンフィグオプション )という形になります。必要であれば、引数のcfgを第二引数に指定します。
Ext.Viewportを生成するメソッドを作成して、onReadyを簡素化する。
では、先に記述したExt.Viewportを生成するメソッドを作成して呼び出してみます。
// {{{ default
// 名前空間定義
Ext.ns( ‘Ext.app’ );// }}}
// {{{ Ext.onReadyExt.onReady(function(){
// アプリケーションクラスインスタンス化
var app = new Ext.app.App();// アプリケーション初期化
app.initApp();});
// }}}
// {{{ Ext.app.App/**
* アプリケーションクラス
*/
Ext.app.App = function( cfg ){// コンフィグ適用
Ext.apply( this, cfg );// 親コンストラクタ呼び出し
Ext.app.App.superclass.constructor.call(this, {
});};
Ext.extend(Ext.app.App, Ext.util.Observable, {
/**
* アプリケーション初期化メソッド
*/
initApp : function(){new Ext.Viewport({
layout: ‘border’,
title: ‘ExtJS勉強会サンプル’,
items: [{
region: 'north',
height: 100,
title: "北"
},
{
region: 'west',
width: 100,
split: true,
title: "西"
},
{
region: 'center',
title: "中央"
},
{
region: 'east',
width: 100,
split: true,
title: "東"
},
{
region: 'south',
height: 100,
title: "南"
}],
renderTo: Ext.getBody()
});}
});
// }}}
このようにして、アプリケーションの機能をクラスに分散していくことで複雑になりがちなJavaScirptコードを、意味ごとに名前空間、クラスごとに分散することができます。
次回予告
今回は、ExtJSを使ってアプリケーションを作成するための入り口を紹介しました。また、ExtJSでアプリケーションをつくる方法は、微妙にこれ以外にもいろいろあります。
次回は、レイアウト内で配置されているExt.Panelなどウィジットと呼ばれる各見た目のクラスについて解説とか、イベントディスパッチなどを利用したクラス設計について説明したいと思います。たぶん。
こういうアプリケーションは、イベントディスパッチなどを利用しないとソースが大変なことになったりするので、イベント制御は必須です。
ExtJSはそこらへんの機能もちゃんとあるので、そこらへんを例を交えながら説明したいと思ってはいます。
あと、今回細かくやりませんでしたが、ExtJSを使う前に、Extオブジェクトに設定すること。なども必要なのでそういった補足とか・・・深すぎでなにやっていいか模索中。
なので、すっごいためにならなくても、いじめないでください。回数重ねれば・・・・というか僕が力尽きない限り繰り返していけばいい資料になるはず？
今回作成したソース
今回、作成した最終的なソースをのせておきます。ブログでみにくいかもしれないので、ソースで見たい人はみてください。
そのまま動くようにExtJS自体もくっついてまーす。ちなみに、今回は画像とかちゃんと配置してませーん。使わないし重くなるんで。
- Newer: Ext.Buttonの幅設定
- Older: 第一回 Ext JS / Ext GWT 勉強会 終了
Trackbacks:3
- Trackback URL for this entry
- http://code.xenophy.com/wp-trackback.php?p=420
- Listed below are links to weblogs that reference
- 第二回EｘｔJS勉強会資料：ExtJS アプリケーション開発 from code:x
- trackback from 7ns.jp ~ Simple Web Services 2008/7/30 水曜日
第2回 Ext JS / Ext GWT勉強会を開催しました…
昨晩、6月の第1回に引き続きExt JS / Ext GWTの勉強会を開催しました。
アジェンダは以下の通り（各タイトルをクリックすると、それぞれの資料が掲載してあるペ (more…)- pingback from ひとりごつる» ブログアーカイブ » ExtJSのJsonStore 2008/8/12 火曜日
[...] cf. Layout関連の情報を探してたらこんなのを見つけました。 [...]
- pingback from Ext Japan - ブログ 2008/10/28 火曜日
[...] ・Ext JSアプリケーション開発の基本（株式会社ゼノフィ 代表取締役社長 小堤 一弘氏） [...]