1. Ext JSアプリケーション
開発の基本
アプリケーション設計：初級編

2. 自己紹介
小堤 一弘（こつつみ かずひろ）
株式会社ゼノフィ
http://www.xenophy.com/
code:x
http://code.xenophy.com/
xFrameworkPX
http://px.xFramework.net/
xFrameworkEX
http://ex.xFramework.net/

3. アプリケーション設計
• Ext JSの使い方は、サンプルとかで学べ
るけど、アプリケーションの作り方は
どこにあるの？

4. アプリケーション設計
どこにもありません。

5. 自分で考えるしかないアプリケーション設計
• サンプルのまねをしてアプリケーショ
ンを作っていったけど、実際につくり
こんでいくとぐちゃぐちゃになる。
• ベストプラクティスがあれば助かるの
になぁ。

6. アプリケーションの形態を考える
• Ext.Viewportを使ったフルスクリーンア
プリケーションを作る
• 既存のHTMLにコンポーネントを埋め込
んで作る

7. アプリケーションクラスを考える
• どのような形のアプリケーションでも
１つのアプリケーションクラスを作っ
て、そいつがすべてを管理する仕組み
はどうだろうか？

8. アプリケーションクラスで求められるもの
• アプリケーション内で起こるイベント
を管理しなくてはならない。
• アプリケーションのブートストラップ
（起動ポイント）にならなくてはなら
い。
• とか・・が考えられる。

9. アプリケーションクラスの親クラス
• Ext.Viewportを使った場合
は、Ext.Viewportクラスを親にしたほう
がいい？
• いろんな形を考えて・・・
Ext.util.Observableクラスがよさそう。
• やってみる・・。

10. アプリケーションクラスの定義
Ext.ns( 'Ext.app' );
Ext.app.App =
Ext.extend( Ext.util.Observable, {
constructor : function() {
// todo
}

11. アプリケーションクラスの実行
Ext.onReady(function(){
new Ext.app.App();
});

12. アプリケーションの初期化
• アプリケーションの初期化
は、Ext.app.Appクラスのコンストラクタ
で行う。

13. Ext.Viewportを作ってみる
Ext.app.App =
Ext.extend( Ext.util.Observable, {
constructor : function() {
this.vp = new Ext.Viewport({
layout: 'fit',
items: [{

14. 自作コンポーネントを作る？
• さっきの例だとサンプルの書き方を
onReadyからアプリケーションのコンス
トラクタに移動しただけじゃん。
• やっぱり、itemsのコンフィグオプショ
ンを指定してパネルを作っている部分
をコンポーネント化して作っていきた

15. 自作コンポーネントを作る！
• 必要なので、作ろう。
• だけど、どうやって作るの？

16. Ext.Panelを継承したクラスを作る
Ext.MyPanel = Ext.extend( Ext.Panel, {
initComponent : function() {
Ext.apply( this, {
title: 'MyPanel版：テストアプリケーション',
html: 'MyPanel版：テストアプリケーションパネルの内容'
});
Ext.MyPanel.superclass.initComponent.call( this );
}
});
Ext.reg( 'mypanel', Ext.MyPanel );

17. Ext.Panelを継承したクラスを作る
Ext.ns( 'Ext.app' );
Ext.app.App = Ext.extend( Ext.util.Observable, {
constructor : function() {
this.vp = new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'mypanel'
}]
});
}
});

18. まだまだ続く複雑なアプリケーション
• パネル1個じゃアプリじゃない。
• サンプルみたく複雑なレイアウトをし
てみる。
• 複数のコンポーネント間でイベントを
使って処理を行う。

19. 次回予告
• もうちょっと、アプリケーションらし
い形を作って、イベント制御を行って
みよう！

20. ご静聴、ありがとうございました
ｍ（＿ ＿）ｍ