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

自己紹介

小堤　一弘（こつつみ　かずひろ）

株式会社ゼノフィhttp://www.xenophy.com/

code:x

http://code.xenophy.com/

xFrameworkPX

http://px.xFramework.net/

xFrameworkEX

http://ex.xFramework.net/

前回までのあらすじ

Ext JSでのアプリケーション構造Ext.util.Observableを継承したアプリケーションクラス作成Ext.Panelを継承したクラス作成パネル１個を内包したアプリケーション作成

前回までのあらすじ

• Ext JSでのアプリケーション構造Ext.util.Observableを継承したアプリケーションクラス作成Ext.Panelを継承したクラス作成パネル１個を内包したアプリケーション作成

前回までのあらすじ

• Ext JSでのアプリケーション構造• Ext.util.Observableを継承したアプリケーションクラス作成

Ext.Panelを継承したクラス作成パネル１個を内包したアプリケーション作成

前回までのあらすじ

• Ext JSでのアプリケーション構造• Ext.util.Observableを継承したアプリケーションクラス作成• Ext.Panelを継承したクラス作成

パネル１個を内包したアプリケーション作成

前回までのあらすじ

• Ext JSでのアプリケーション構造• Ext.util.Observableを継承したアプリケーションクラス作成• Ext.Panelを継承したクラス作成• パネル１個を内包したアプリケーション作成

今回作るアプリケーション内容

• Northリージョン、Centerリージョンにパネルを配置したビューポートを作成、各パネルクラスを継承して作成する。

• パネルにボタンを配置して、他のパネルを操作する。（イベント操作）

• 具体的には背景色を変更する

完成予想図

ブラウザで確認

完成予想図

ブラウザで確認

各リージョンパネルクラス作成

• 前回と同じ方法で、パネルクラスを作る。

• NorthPanelクラスとCenterPanelクラス

• NorthPanelクラスには、ツールバーを配置

ビューポートに組み込む

• 各クラスをビューポートに組み込んで表示させる

イベント処理をする

• メニューボタンのイベントハンドラを作成する

• アプリケーションオブジェクトのイベントを発火させる

イベントハンドラを作成する

• 各パネルに自分の背景色を変更する処理を記述するイベントハンドラを作成する。

まとめ

• 自分のことは自分でやる（クラス内に処理を実装）

• すぐにgetCmpを使わない

• バイパスは、アプリケーションオブジェクト

次回予告

次回予告

ツリーやグリッドなど、実用で使いそうな部品を取り入れて、もっとアプリケーションっぽくしてみる

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