コンポーネントとコンテナー3

前回、コンテナーについてまで学びました。今日は、そのコンテナーの機能について、見て見ましょう。

動的なアイテム設定

いままで、コンフィグオプションに 固定 で、コンテナーやコンポーネントを追加（定義）してきました。

プログラマブルに追加することはできないのか？ と思うシーンが、少なからずでてくるはずです。大概は、固定でしょうけど、データに応じたUI構築も十分にあり得ます。

ここでは、パネルを動的に追加してみたいと思います。

ボタンのイベントハンドラは、既にやっているとうにビューコントローラーに設定します。

イベントハンドラのスコープは、ビューコントローラーになっていますので、getViewメソッドで、ビューオブジェクトを取得して、add メソッドで追加することができます。

逆に、removeメソッドを用いて、削除することももちろん可能です。

コンポーネントの検索

ビューコントローラー内のイベントハンドラはデフォルトで、ビューコントローラーになります。先ほどの動的な追加の場合、たまたま操作するビューが、Mainだったので、getViewするだけでビューオブジェクトを取得できました。

しかし、当然そんな都合の良いことばかりではありません。コンポーネントは、コンテナーに配置され、何かしらのネスト関係（上下関係）が存在します。（コンテナーも作らず、BODYにレンダリングした場合は別ですが）

コンポーネント、およびコンテナーは、上方向（自分を囲っているコンテナー）、下方向（コンテナーが持つコンテナーやコンポーネント）へ向けて、取得したいビューオブジェクトを検索して取得することができます。

上記は、Mainから見て、子供にあるbutton (xtype)を探し出して、ボタンにテキストを設定しています。この場合、サンプルなので、イベントハンドラの引数にボタンビューオブジェクトが入ってきちゃうんで、それ使えばいいんですが… あえて検索しています。

これが、downです。

今度は、引数に渡ってくるボタンオブジェクトを使い、ボタンから見て上にあるpanelを探し出して、パネルのタイトルを変更しています。

このように、自分から見て上、下方向に検索することができます。もちろん、コンポーネントは上だけですね、アイテムがないので。コンテナーは上下両方いけます。

この検索は、xtypeを指定するだけでなく、もう少し複雑な検索（クエリー）を実行することが可能です。これは、コンポーネントクエリーといい、Ext.ComponentQueryクラスがその処理を行っています。
別な回で、コンポーネントクエリーも使いこなしてみたいと思いますが、APIドキュメントで、どんな書き方ができるか、確認してみてください。CSSセレクターと殆ど一緒です。

終わりに

今回は、コンテナーの機能について触れてみました。実際の開発では、サンプルのようにただコンテナー/コンポーネントを表示するだけで実装が完了することは、殆どなく、コンテナー内をコンポーネントクエリーで検索して、他のコンポーネントを制御するなんていこうとは、日常茶飯事です。

今日は、コンテナーに動的にコンテナー/コンポーネントを入れ込めること、そして配置されたコンテナー/コンポーネントを検索して制御できるということを学びました。

次回は、インタラクティブなアプリケーションを作っていく中で必須な、イベント制御について学びます。