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

さて、今日は、昨日に引き続き、コンテナーについてです。

コンテナーとは何か？

コンテナーは、実は、こいつもコンポーネントです。

「(￣△￣；）ｴッ･･?」

いや、コンポーネントです。

しかし、コンポーネントと違うところが当然あります。それは、コンテナーは、 中にコンポーネント/コンテナーを入れることができる という点です。

Sencha Ext JSを利用した画面構築は、このコンテナーにコンポーネントやコンテナーを入れていきながら構築していきます。

コンテナーは、Ext.container.Containerクラスを必ず継承しています。

代表的な物として、

• Ext.panel.Panel
• Ext.window.Window
• Ext.tab.Panel

などが、コンテナーです。

アイテム

コンテナーは、中にコンテナーやコンポーネントを入れていくことでUIを構築していくことは、上記で説明しました。 では、早速中にコンテナーやコンポーネントを入れてみましょう。

既に、再三登場している itemsというのが、中に入れるコンテナーやコンポーネントを指定する場所です。

通常、配列で指定しますが、1つだけ指定する場合、オブジェクトリテラルを直接指定しても構いません。

レイアウト

コンポーネントは、既に説明したようにDIVタグが作られます。アイテムに追加したコンポーネントたちは、そのままでは、ただDIVタグがどんどんっ！と積まれるダケです。

コンテナーには、layoutを指定することができて、中のコンテナーやコンポーネントをどのように配置するかを指定することができます。

レイアウトについても、種類がたくさんあるので別な回で紹介します。

defaults/detaultType

コンテナーは、ネストすることができます。ネストしたときに、中のitemsに対して、同じ指定が繰り返される場合、毎回指定しないといけません。

そこで、使えるのが defaults です！上記で、xtypeとwidthを何回も書いていますが、これをdefaultsに指定することで、繰り返しの指定をできます。

コンテナーには、子供のxtypeが指定されなかった場合、なんのxtypeを使うか？が予め指定されています。これを、defaultTypeといって、これを書き換えると、初期値のxtypeを書き換えることができます。先ほどは、defaultsでxtypeを指定しましたが、これでもOKです。

デフォルトのxtypeを切り替えたいだけであれば、defaultTypeを指定しましょう。 ちなみに、Ext.panel.panel(xtype: ‘panel’)のdefaultTypeは、’panel’になっているため、特にxtypeを指定しないでネストすると、ドンドンパネルが作られていく仕組みになっています。

豆知識 複雑なレイアウトを行うために、コンテナーをネストしていくことになります。パネルの場合、defaultTypeが’panel’のため、レイアウト用のコンテナーもExt.panel.Panelになります。しかし、レイアウトのためだけに、Ext.panel.Panelほどの多機能なコンテナーを利用する必要はありません。Ext.panel.Panelが1つレンダリングされるだけでそれなりのDIVタグが生成されます。 なので、レイアウト用のコンテナーは、Ext.container.Containerクラスを使いましょう。そうすることで、軽量なコンテナーとして利用することができ、同じレイアウトをExt.panel.Panelで行うよりも高速に動作しますし、ブラウザのリレンダリングに対する負荷も軽減できます。

終わりに

どうでしょうか、UIを作るための鍵となる コンテナーがどんなものか、なんとなく解ってきましたか？実際作ることになる複雑なレイアウトも、このコンテナーのネストを行って、レイアウトを駆使してやっていきます。

レイアウトについても、複数回でやるので是非マスターしてみてください。

次回は、コンポーネント/コンテナーによる操作から再開します。