レイアウトシステムは、Ext JSの最も強力な部分の一つです。アプリケーションのあらゆるComponentの位置とサイズを処理します。このガイドでは、基本的なレイアウトの始め方をカバーしています。
コンテナ
Ext JSのアプリケーションUIは、Componentから構成されています（コンポーネントについてはコンポーネントガイド参照）。コンテナは、他のコンポーネントを格納できる特殊なタイプのコンポーネントです。典型的なExt JSのアプリケーションは、コンポーネントの集合体からなる複数のレイヤーで構成されています。
最も頻繁に使用されるコンテナは、Panelです。どのようにコンテナが他のコンポーネントを格納可能にするパネルになるのか見てみましょう：
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 300,
title: 'Container Panel',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
width: '75%'
},
{
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
width: '75%'
}
]
});ここでは、ドキュメント本体に自動的にレンダリングするパネルを作成し、itemsコンフィグを使用してコンテナパネルに子パネルを2つ追加しました。
レイアウト
どの container にも layout があり、その子コンポーネントのサイズと位置の設定を管理しています。このセクションでは、特定のレイアウトを使用したコンテナの設定方法、レイアウトシステムが全てを同期する方法についてお話します。
レイアウトの使用
上記の例では、コンテナパネルのレイアウトを指定しませんでした。通常のブロック要素がDOMになるのと同様に、どのように子パネルが次々にレイアウトされたか、注目してください。全てのコンテナのデフォルトのレイアウトは、Auto Layoutであるため、このようになります。自動レイアウトは、子要素に対して特定の位置決めもしくはサイズ決めのルールを指定しません。例えば、2つの子パネルを横に並べて、それぞれの幅がコンテナのちょうど50％になるように配置するとします。 コンテナ上でlayoutコンフィグを設定するだけで、Column Layoutを使用できます。
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 200,
title: 'Container Panel',
layout: 'column',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
columnWidth: 0.5
},
{
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
columnWidth: 0.5
}
]
});Ext JS には、レイアウトのフルセットが付属しており、思い付くほとんどのあらゆるタイプのレイアウトに対応できます。実際に使用されているレイアウトを見るにはキッチンシンクのレイアウトセクションを参照してください。
レイアウトシステムの仕組み
ContainerのLayoutは、コンテナの子すべての最初の位置とサイズを決定します。内部で、フレームワークは、コンテナのdoLayoutメソッドを呼び出して、コンテナの子すべての正しいサイズと位置を計算し、DOMを更新するようにレイアウトをトリガーします。doLayoutメソッドは完全に再帰的であるため、コンテナの子のいずれも同様にdoLayoutメソッドを呼び出されることになります。これは、Component階層の最下位に到達するまで継続します。通常、フレームワークが処理するので、アプリケーションのコードでdoLayout()を呼び出す必要はないでしょう。
コンテナがresizedである場合、または子コンポーネントitemが、addedまたはremovedである場合、再レイアウトがトリガーされます。通常、レイアウトのアップデートを処理するためフレームワークに単に依存することは出来ますが、時には、複数の作業を共にバッチ処理し完了したら手動でレイアウトするなどして、フレームワークが自動的にレイアウトを行うのを防ぎたいです。このために、コンテナ上でsuspendLayoutフラグを使用して、レイアウトの決定を防止する一方、通常はレイアウトをトリガーする（例えばアイテムの追加または削除）操作を実行します。作業が完了したら、やらなければいけないことは、suspendLayoutフラグをオフにして、手動でレイアウトを引き起こすためにコンテナのdoLayoutメソッドを呼び出すことです。
var containerPanel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 200,
title: 'Container Panel',
layout: 'column',
suspendLayout: true // Suspend automatic layouts while we do several different things that could trigger a layout on their own
});
// Add a couple of child items. We could add these both at the same time by passing an array to add(),
// but lets pretend we needed to add them separately for some reason.
containerPanel.add({
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
columnWidth: 0.5
});
containerPanel.add({
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
columnWidth: 0.5
});
// Turn the suspendLayout flag off.
containerPanel.suspendLayout = false;
// Trigger a layout.
containerPanel.doLayout();コンポーネントレイアウト
ContainerのLayoutがコンテナのComponent itemsのサイズや位置を定義するように、コンポーネントには、内部の子アイテムのサイズや位置の決定方法を定義するLayoutがあります。コンポーネントレイアウトは、componentLayoutコンフィグオプションを使用して設定されます。
一般的には、全ての提供コンポーネントにレイアウトマネージャーが付属するので、カスタムコンポーネントを記述していない限り、この設定は不要です。ほとんどのコンポーネントは、Auto Layoutを使用しますが、もっと複雑なコンポーネントは、カスタムコンポーネントレイアウトを必要とします（例えば ヘッダー、フッター、ツールバーがあるPanel）。