Ext JS 4.0/4.1 MVCアプリケーション構造の理解II – 株式会社ゼノフィ社内勉強会資料

本資料は、2011年12月18日に開催された株式会社ゼノフィ社内勉強会資料です。

株式会社ゼノフィ

アジェンダ

  • TreeStoreを利用する
  • コントローラー間のやりとり

Ext JS 4.0/4.1 MVCアプリケーション構造の理解」の続きです。
ここからサーバーサイドも利用していきますが、シンプルにPHPで実装していきます。

TreeStoreを利用する

まず、ツリーを作成するためには、Ext JS 4 からTreeStoreを利用します。
とりあえず、サーバーサイドのPHPを提示します。

PHPのコードはプレーンな物で、単純にしてありますので、PHPの説明は省きます。

さて、まずは、上記のPHPスクリプトで読み込むべきストアを作成します。

src/app/store/Navi.js

viewやcontrollerと同じようにstoreというディレクトリ内に作成します。
このストアを利用するように、Naviコントローラーに設定を記述します。

src/app/controller/Navi.js

storesに先ほど定義したStoreクラスを指定します。
ここに定義すればviewsのように自動的にExt.Loaderが読み込みを行います。

次に、viewのNaviパネルを、TreePanel(Ext.tree.Panel)に変更してストアを設定します。

src/app/view/Navi.js

ここまでを実装すると、次のようにツリーが表示できるようになります。

リロードを実装する

TreeStoreを利用して、データをロードしてツリーを表現できました。
特にデータは変わりませんが、リロードボタンを実装してみます。

右上の「ボタン3」に実装しましょう。

まぁ、まずは、Headerコントローラーのcontrolメソッド内に実装します。

ボタンを押すと、ツリーがリロードされます。
Naviコンポーネントを取得するには、前にやったrefsのgetNaviを利用します。
TreePanelのストアにアクセスするには、

としてもアクセスできてしまします。
しかし、これは公開プロパティではありません
なので、getStoreを呼び出して取得します。

あとは、ストアのloadメソッドを呼び出すだけです。
さて、Treeパネル(Navi)を捕まえて、ストアオブジェクトを捕まえて、メソッドで操作することやってみました。

次に、同じ機能をNaviパネルにも実装します。

src/app/view/Navi.jsにボタンを追加します。

これまでの流れのように、このリロードボタンの実装を行うには、Xenophy.controller.Naviに実装します。

src/app/controller/Navi.js

さて、ここまでで2カ所リロードする処理を実装しました。

・・・・1カ所にしたくないでしょうか?
同じことやってるんですかね。

次の項目で、この処理を統合しましょう。

Code8 to GitHub

コントローラー間のやりとり

さて、Headerでもリロードを実装し、Naviでもリロードを実装しました。
Naviのリロードですから、Naviのコントローラーにだけ実装したいですね。

ということは、Headerコントローラーから、Naviコントローラーにアクセスする手段が必要です。

まずは、Naviコントローラーの実装をメソッド化します。

次に、Headerコントローラーのリロード実装を、NaviのonReloadの呼び出しに切り替えます。
ボタン3の実装を次のように切り替えます。

はい、getControllerを使って引数に、ほしいコントローラー名をいれるだけですね。
こちらの方が正しいのですが、コントローラーはMixedCollectionで管理されています。
次のようにアクセスすることも可能です。

コントローラーオブジェクトを取得するがために、ややこしい実装を自分でする必要は一切ありません。

Code9 to GitHub

イベント化

さて、NaviコントローラーのonReloadをHeaderコントローラーで直接呼び出しました。
Ext JS らしくイベントで処理するように修正してみましょう。
ボタン3のイベントハンドラを次のように書き換えます。

次に、Naviコントローラーを次のように書き換えます。

src/app/controller/Navi.js

はい、xenophy-header(xtype)で、コンポーネントを捕まえて、イベントハンドラをonReloadを設定するだけですね。
こうすることで、Headerパネルとコントローラーが、Naviツリーパネルに依存しなくなります。
(コンポーネントとして独立して動作するということ、コンポーネント別テストなどに非常に有効です)

コントローラーオブジェクトを取得して、処理をすべきか、イベントで処理すべきかは設計次第ですが
通常はイベントで行うべきです。
グループ化されたコンポーネント(複数のコンポーネントが必ずないと動かない前提のコンポーネント)の場合
複数コントローラーになることもありますので、その場合にはgetControllerで処理しても問題ないでしょう。

Code10 to GitHub

終わりに

ツリーパネルをExt JS 4で、かつMVCでどのように操作するかが理解できたのではないでしょうか。
Ext JS 4.0/4.1 MVCアプリケーション構造の理解IIIでは、Centerパネル内に、FormパネルとGridパネルを作成して、ナビゲーションから切り替える操作を実装していきながら、GridパネルとFormパネルの操作も習得していきましょう。

Ext JS 4.0/4.1 MVCアプリケーション構造の理解II – 株式会社ゼノフィ社内勉強会資料

One thought on “Ext JS 4.0/4.1 MVCアプリケーション構造の理解II – 株式会社ゼノフィ社内勉強会資料

Comments are closed.