Architectでは、レイアウトは、アプリケーション内のコンポーネントのサイズや配置位置を制御します。各コンテナのレイアウトを構成することは、どのようにコンテナの子が表示されるかを管理することになります。最上位（親）コンテナのレイアウトは、子コンポーネントのサイズや位置の設定を決定します。コンテナのレイアウトを設定するには、Flyout Config ボタン（キャンバスのコンポーネント名の右のに表示される歯車型のボタン）または、[Config（コンフィグ）] 内の layout プロパティを使用します。
基本的なコンテナのレイアウト
Ext JS と Sencha Touch では、Architect を使用して設定することが可能な基本のコンテナレイアウトを多数提供しています。Sencha Touchは、モバイル端末用UIデザインのための適切なExt JSレイアウトのサブセットをサポートします。一部のレイアウトは、アコーディオンやカードといった一般的に使用される特定のプレゼンテーションモデルをサポートしますが、他のレイアウトでは、いろいろなアプリケーションに使用できるより汎用的なモデル（たとえば子コンポーネントを縦または横方向に並べる HBox や VBox など）を提供します。
次の表は、Ext JS と Sencha Touch でサポートしているレイアウトオプションをまとめたものです。
| レイアウト | 説明 | Ext JS | Sencha Touch |
|---|---|---|---|
| Auto / Default | 子コンポーネントを順番に描画するデフォルトレイアウト | Ext.layout.container.Auto | Ext.layout.Default |
| Absolute | コンテナに相対的な x/y 位置を使用してコンポーネントを配列 | Ext.layout.container.Absolute | No Analog |
| Accordian | 同時に 1 つのパネルだけを拡張した垂直スタックにパネルコンポーネントを配列 | Ext.layout.container.Accordion | No Analog |
| Anchor | コンテナの両側に相対的にコンポーネントを配列 | Ext.layout.container.Anchor | No Analog |
| Border | パネルコンポーネントをリージョンごとに配列 | Ext.layout.container.Border | No Analog |
| Card | コンポーネントの領域全体を埋めて、子コンポーネントが同時に見えるのは 1 つだけとなるように配列 | Ext.layout.container.Card | Ext.layout.Card |
| Column | マルチカラムレイアウトでコンポーネントを配列 | Ext.layout.container.Column | No Analog |
| Fit | 利用できるスペースを埋めるように単一の子コンポーネントを拡張 | Ext.layout.container.Fit | Ext.layout.Fit |
| Table | コンポーネントを HTML 表で配列 | Ext.layout.container.Table | No Analog |
| HBox | 子コンポーネントを水平に配列コンテナの stretch 配置を使用して、使用可能な縦方向のスペースを子コンポーネントが埋めるようにします。flex 属性を使用して、各コンポーネントが埋める横方向のスペースの割合をコントロールします。 |
Ext.layout.container.HBox | Ext.layout.HBox |
| VBox | 子コンポーネントを垂直に配列します。コンテナの stretch 配置を使用して、使用可能な横方向のスペースを子コンポーネントが埋めるようにします。flex 属性を使用して、各コンポーネントが埋める縦方向のスペースの割合をコントロールします。 |
Ext.layout.container.VBox | Ext.layout.VBox |
作業開始に役立つように、本ガイドの末尾にはレイアウトの使用方法を示す例を 3 つ紹介しています。
さまざまなレイアウトがどのように機能するかをより深く理解するには、Ext JS Layout Browser（英語） をご利用いただけます。この Layout Browser は Ext JS 向けに書かれたものですが、情報は Sencha Touch でサポートしているレイアウトのサブセットにもあてはまります。本ガイドの末尾にある例では、 Ext JS フレームワークを使用しています。
以下には、ビューコンポーネントを構成するときに使用できる、基本的なExt JSレイアウトを紹介しています。これらのレイアウトは、Sencha Touchでもサポートされていることに注意してください。
Auto（Ext JS）と Default（Sencha Touch）
Ext JS と Sencha Touch の双方でサポートされるデフォルトのレイアウトです。パネルのような汎用コンテナで使用されます。 Autoレイアウトを使用すると、子コンポーネントが順番に表示されます。いくつかのコンテナでは、デフォルトでAutoレイアウトを使用しない場合もあります。例えば、Tab PanelにはCardレイアウトが使用されます。 ToolBarにはHBoxレイアウトが使用されます。
Absolute（Ext JS のみ）
Ext JSだけがサポートしています。コンテナからの相対的なx/y座標位置を使用してコンポーネントを配置します。明示的にコンテナ内のコンポーネントの再配置やリサイズを行い、正確な管理を提供します。たとえ、親のコンポーネントをリサイズしても、絶対位置に配置されたコンポーネントは、修正されません。
Absoluteレイアウトを使用したコンテナ内には、グリッドが表示されます。デフォルトでは、再配置されたコンポーネントは、グリッドのマス目に合わせてぴったりとはまります。コンテナのFlyout Configボタンをクリックすると、グリッドのマス目の大きさの変更または、無効にすることができます。グリッドは、レイアウトのガイドとしてのみデザインビュー内に表示されます。 コンポーネントが配置されている部分には、グリッドは見えません。
Accordion（Ext JS のみ）
Ext JSだけがサポートしています。Panelコンポーネントを、一枚のパネルだけが一度に展開される垂直なスタック状に配置します。パネル（そのサブクラス、例えばTabPanelを含む）だけが、Accordionレイアウトを使うコンテナに追加されることができます。
Anchor（Ext JS のみ）
Ext JSだけがサポートしています。コンテナの側面と比較してコンポーネントを配置します。子コンポーネントの幅と高さをコンテナの割合で指定するか、コンテナの右下からのオフセットを指定します。コンテナの大きさが変更された場合でも、相対的な割合または、オフセットが維持されます。
Border（Ext JS のみ）
Ext JSだけがサポートしています。Panelコンポーネントを、5つのリージョン（North、South、East、West、Center）により、複数パネルレイアウトで配置します。Borderレイアウトを使用したコンテナでは、子要素を必ずCenterに割り当てなければなりません。Centerリージョンは自動的に空きスペースにフィットするようにサイズ設定されます。パネルの右端または、下端をクリックし、ドラッグすることで、キャンバス上のNorthまたは、South、 East、 West、 Centerリージョンをリサイズします。折りたたみ(collapsed)を有効にすることで、Borderレイアウトになっている全てのリージョンを折り畳むことができます。生成され、コンテナがリサイズされるとき、子パネルは自動的にリサイズされます。
Card（Ext JS および Sencha Touch）
Ext JS と Sencha Touchどちらでもサポートされています。1 度に 1 つのみがコンポーネントの領域全体に表示されるように子コンポーネントを配置して、ユーザーが一連のコンポーネントを 1 つずつ移動できるようにします。setActiveItemメソッドを使用し、コンポーネントを表示するかを指定します。このような動作には、一般的に「Prev」や「Next」ボタンなどのUIナビゲーション要素がコンテナのフッターなどに適用されています。これはウィザードを作成する際によく使われます。本ガイドで後述する例を参照してください。
Column（Ext JS のみ）
Ext JSだけがサポートしています。多段組みによりコンポーネントを配置します。各カラムの幅を割合（column width属性）または、ピクセル（width属性）で指定します。カラムの高さは、カラムの内容により変化します。アプリケーションのデータで、コンテンツがコンテナの高さに収まらないカラムを表示する必要がある場合、autoScroll を有効化します。
Fit（Ext JS および Sencha Touch）
Ext JS と Sencha Touchどちらでもサポートされています。一つの子コンポーネントを拡大して、空きスペースを埋めます。例えば、単一のタブパネルを含むダイアログボックスを作成する場合には、このレイアウトを使用します。もし、コンテナがパネルコンポーネントの一種であれば、追加のツールバーのような子コンポーネントをパネルの上部または左、右、下部へ追加や連結することができます。
Table（Ext JS のみ）
Ext JSだけがサポートしています。コンポーネントをHTMLテーブルに配置します。テーブル内のカラムの数を指定します。子コンポーネントのrowspanとcolspanを指定することにより、複雑なレイアウトによるテーブル作成を可能にします。
HBox（Ext JS および Sencha Touch）
Ext JS と Sencha Touchどちらでもサポートされています。水平方向に子コンポーネントを配置します。コンテナのalignをstretchに設定することで、子コンポーネントは垂直方向いっぱいにコンポーネント高さを広げられます。子コンポーネントのflex値を設定することで、各子コンポーネントが水平方向に占める割合を指定することができます。
VBox（Ext JS および Sencha Touch）
Ext JS と Sencha Touchどちらでもサポートされています。垂直方向に子コンポーネントを配置します。コンテナのalignをstretchに設定することで、子コンポーネントは水平方向いっぱいにコンポーネント幅を広げられます。子コンポーネントのflex値を設定することで、各子コンポーネントが垂直方向に占める割合を指定することができます。
入れ子のレイアウト
Ext JSまたは、Sencha Touchでコンテナが入れ子になっているとき、入れ子となった全ての子コンポーネントまたは、他のコンテナは、親コンテナのレイアウトにより管理されます。親要素のレイアウトは、その*コンテナ*内の子*要素*のみに作用し、孫以降の要素のレイアウトには影響を与えません。このことにより、入れ子にされた要素の複雑なレイアウトが可能になります。
柔軟なボックスレイアウト
HBoxやVBoxレイアウトでは、子コンポーネントはflex属性を使用することで、コンテナ内のスペースに合わせてサイズを調節することができます。flex属性には、コンポーネントに割り当てられるスペースの割合を示す数値を入力します。 整数または、少数を含むどんな浮動小数点数でも設定することができます。３つのサブパネルを含むあるコンポーネントを考えてください。
Panel 1とPanel 3にはflex値を1に、Panel 2にはflex値を2と設定しています。下の図に示すように、コンポーネント内のスペースは４等分（４は各flex値の合計）されPanel 1とPanel 3は1/4のスペース、Panel 2は2/4(=1/2)のスペースが与えられています。
あるコンポーネントの幅または高さをピクセル値で設定し、他のコンポーネントをflex値により設定した場合には、全体のスペースから、ピクセル値で指定した分を差し引き、差し引いた残りのスペースをflex値を設定したコンポーネントに割り当てます。例えば、幅400pxのコンテナがあり、Panel 1に幅200pxと設定した場合にはflexにより使用される幅は残りの200pxとなります。ここで、Panel 2のflex値を2とし、Panel 3のflex値を1とした場合、下図に示すように、Panel 2には2/3、Panel 3には1/3のスペースが割り当てられます。
もし、コンポーネントにピクセル値もflex値も指定されない場合には、フレームワークは、アプリケーションのCSSにより、サイズが定義されているかどうかを調べます。CSSでサイズを指定していない場合、フレームワークは最小限必要なスペースを各コンポーネントに割り当てます。
コンポーネントの引き延ばし
もし、HBoxまたはVBoxレイアウトが使用されているコンテナのalignが、stretchに指定されているならば、そのサブコンポーネントは自動的に水平または垂直方向いっぱいの幅または、高さに設定されます。HBoxが指定されている場合には垂直方向いっぱいの高さに、VBoxが指定されている場合には水平方向いっぱいの幅にサブコンポーネントのサイズが設定されます。例えば、HBoxを使用したパネルでstretchが設定されている場合、各サブパネルの高さは、自動的に垂直方向の空きスペースいっぱいに引き延ばされます。
サブコンポーネントのサイズをコンポーネントの最小幅または最小高さまで引き延ばすこと以外は、stretchmaxオプションはstretchのように動作します。
例1：Cardレイアウトを使用して、ウィザードを作成する
コンポーネントがCardレイアウトを使用している場合、子コンポーネントは1つずつ表示され、ウィザードを作成するために理想的なオプションを作ります。この例では、3 段階の登録を行うウィザードを Card レイアウトを使用して作成する方法を説明します。
基本的なアプローチは次のとおりです。
- Card レイアウトを使う Window コンテナにサブパネルを追加します。Windowコンテナは、大きさを変更でき、ドラッグし、開くことができる、特殊なタイプのコンポーネントです。
- パネルを順送りするためのナビゲーションツールバーを構成します。
- ユーザーが Window 内でナビゲーションボタンをクリックしたら該当するパネルを表示する、
setActiveItem関数を呼び出すハンドラを実装します。
コンポーネントの追加と設定
ツールボックスまたはキャンバスを通し、Windowコンテナを追加して、開始します。Windowは最上位のコンポーネントとしてのみ追加できます。 既存のコンポーネントの子コンポーネントとしては追加できません。 次に、Windowの上にPanelコンテナをドラッグします。 このサブパネルは、ウィザードの初めのステップを作成するのに使用されます。WindowにCardレイアウトを適用するために、WindowのFlyout Configボタンをクリックして、layoutメニューからcardを選択します。さらに、ウィザードに任意の名前を付けるために、Config中のtitleプロパティを設定するか、もしくはキャンバス中のWindowのタイトルをダブルクリックしMyWindowを上書きします。
次に、Panel コンテナを Window にドラッグします。このサブパネルはウィザードの最初のステップを作成するために使用します。CardレイアウトのPanelは、コンテナに追加される順番で番号が付けられ、はじめは0アイテムです。デフォルトでは、0アイテムはactive itemとして設定されます。Architectでactive itemを変更するには、Windowを選択し、アクティブにするパネルにactiveItem属性を設定します。
ウィザードの2つ目と3つ目のステップのために、Windowにもう2つパネルを追加します。キャンバス上の Window のタイトルバー上か、もしくは [Project Inspector（プロジェクトインスペクタ）] の View ノードの Window 上に、これらをドラッグします。
サブパネルが追加されたら、タイトルバーを非表示にします。はじめに、インスペクタから各サブパネルを選択します。次に、ConfigでExt.panel.Panel以下のtitle属性までスクロールするか、filterフィールドでtitleと入力します。次に、title属性の右のフィールド(My Panelを選択するか、titleのValueフィールド右のxボタンをクリックします。
ボタンの追加と設定
このウィザードには、あるステップから次のステップに進むためのナビゲーションボタンが必要です。ツールボックスから、最上位のWindowにToolbarコンポーネントを追加し、Flyout Configメニューからbottomを選択して、window内の最下部に移動します。
次に、Toolbarにボタンを4つ追加して、それぞれCancel、Previous、Next、Submitと名前を付けます。キャンバス上の1つ目のボタンのラベルをダブルクリックして、名前を入力して、tabキーを使用してまだ名前を付けていない次のボタンに移動できます。
このボタンには、ユーザーと開発者にとってより使いやすくなるように、もう少し作業が必要です。まず、CancelボタンとPreviousボタンの間へのFillコンポーネントの追加し、NextボタンとSubmitボタンの間へのwidth属性が20のSpacerコンポーネントを追加して、ボタンを整列します。
次に、[Config（コンフィグ）] を使用し、各ボタンにおいて itemid 属性（Ext.AbstractComponent にある）までスクロールダウンし、navigation ハンドラで簡単に参照できるような名前を設定します。例えば、それぞれitemid属性にcancelBtn、prevBtn、nextBtn、submitBtnと設定します。
それぞれのカードにコンテンツを追加
ここで、ウィザードのために各カードにコンテンツを追加します。ウィザードは、ユーザーの入力を集める必要があるので、それぞれのカードはPanelではなくForm Panelにする必要があります。幸い、Architect ではコンポーネントの種類を簡単に変更できます。PanelからForm Panelに変更するには、それぞれを右クリックしてTransformを選択します。 この場合はExt.form.Panelです。
3枚のカードのウィザード
このサンプルでは、以下の画像のように3つのカードで馬術教室のための登録ウィザードを構築します。デフォルトでは、Card 0がアクティブなCardです。Card 1とCard 2にformフィールドを追加するために、Windowを選択して、動かしたいパネルにactiveItem属性を設定します。
例 2:HBox レイアウトを使用した複数カラムの作成
HBoxレイアウトは、サブコンポーネントの水平方向への配置を有効にします。 一方、VBoxレイアウトはサブコンポーネントを垂直にレイアウトします。これらの汎用レイアウトは、絶対位置を使用しないコンポーネントの配置方法の調節を提供します。
この例では、スペースを節約するため、複数カラムに複数の関連するチェックボックスを配置します。Form Panelコンテナで始めます。 次に、チェックボックスのためにForm Panelが親となるようにFieldSetコンテナを追加します。FieldSetにhboxレイアウトを設定します。
次に、ContainerコンポーネントをFieldSetの各列に追加します。インスペクタから各Containerを選択して、flexを1に設定し、追加された全てのチェックボックスが収用できるようなheightを設定します。例えば、60ピクセルであれば、3列のチェックボックスを収容できます。Componentsタブからcolumnコンテナを選択する方がより簡単です。これらが FieldSet に最初に追加される際には、height はデフォルトで 2 ピクセルに設定されており、キャンバスで選択することは困難です。これが、インスペクタからコンポーネントを選択する理由です。
最後に、各 column コンテナにチェックボックスを追加して、それぞれに boxLabel 属性を設定します。チェックボックスの周りのマージンを指定するには、column コンテナの layout を auto から vbox に変更してから、各チェックボックスに margin 属性を設定します。
例3：ViewportのBorderレイアウトの使用
ブラウザウィンドウ (つまり、ブラウザ全体のビューポート) にコンテンツ領域を必要とするアプリケーションを作成するには、Viewportコンテナを使用します。Viewportは、サブパネルのコレクションをNorth、South、East、West、Centerの各リージョンに配置するために、通常Borderレイアウトを使用します。Border レイアウトを使用する場合、利用可能なスペースに合うように自動的にサイズが調整される Center リージョンに Panel のサブコンポーネントを割り当てる必要があります。
では、このアプローチを使用している例を見て行きましょう。学生がクラスに登録するためのビューアです。
新しいArchitectプロジェクトに、Viewportを追加してビューワーの構築を始めます。Viewportは、最上位コンポーネントとしてのみ追加できます。 既に存在するコンポーネントの子としては追加できません。ViewportのFlyout Configボタンをクリックし、Borderレイアウトを選択して、layoutメニューからborderを選択します。
次に、ViewportにPanelをドラッグします。これは、現在のレイアウトの中で唯一のコンポーネントなので、自動的にCenterリージョンに割り当てられます。このPanelは、クラスに登録された生徒の情報を表示するので、Student Informationと名付けましょう。
Viewportの子コンポーネントとしてTreePanelを追加するために、Viewportを選び、ツールボックスのTree Panelをダブルクリックします。あるいは、Tree PanelをインスペクタのViewportの上のドラッグすることもできます。Architectは、自動的にTree PanelをWestリージョンに割り当てます。生徒は、取ることができるクラスをナビゲートするのにツリーを使用しますので、Class Listと名付けましょう。
サブコンポーネントが割り当てられるリージョンは変更可能であることに注意してください。変更するには、Configからサブコンポーネントのregion属性を設定します。
次のステップでは、クラスに関するコンテンツを表示するために、Class ListツリーとStudent Informationパネルを設定することになります。テンプレートはStudent Informationパネルで個別の学生データを表示するために使用することができます。