No.7 レイアウトモデル

コンポーネントモデルについての回で、簡単にですがコンテナーについて触れました。
今回は、そのコンテナーが「どのように内包するコンポーネントを配置するか」を決定する レイアウトモデル についてです。

Sencha Ext JS と Sencha Touch では、その特性から扱えるレイアウトに違いがあります。 この稿では、Sencha Ext JS におけるレイアウトについて説明します。

概要

SenchaフレームワークではUI部品である様々なコンポーネントクラスを柔軟に配置するために、 各種のレイアウト用クラスを用意しています

• Absolute
• Accordion
• Anchor
• Auto
• Border
• Card
• Column
• Fit
• Table
• VBox
• HBox

公式ドキュメントの Layout Browser でそれぞれのレイアウトを確認できます。

実際のレイアウト処理は、レイアウト対象となるコンポーネントを内包している、 コンテナークラスに設定されたレイアウトクラスにより行われます。

入れ子になっているコンテナーのそれぞれが別々のレイアウトを持つことが可能です。 このことにより非常に複雑なレイアウトの構築が可能となります。

コンテナー

まずはコンテナーについて。
コンテナーとはコンポーネントを内包することのできるコンポーネントのことでしたね。
全てのコンテナーはExt.container.Containerのサブクラスです。

もちろん、コンテナーはコンポーネントでもあるので、コンテナーの中にコンテナーを入れることもできます。
そうやって、ネストを深くしていくことで複雑なUIを作ることが出来ます。

レイアウトを設定する

レイアウトを設定するには、コンテナーのコンフィグにlayoutを設定する必要があります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Ext.create('Ext.panel.Panel', {
    title: 'Sample Layout',
    width: 200,
    height: 120,
    renderTo: document.body,
 
    // layout: 'vbox',
    layout: {
        type: 'vbox',
        align: 'center'
    },
    defaults: {
        xtype: 'button',
        margin: 3
    },
 
    items: [{
        text: 'button1'
    },{
        text: 'button2'
    },{
        text: 'button3'
    }]
});

layoutコンフィグは文字列で設定する方法と、オブジェクトで設定する方法があります。
文字列で設定する場合はレイアウト名を指定します。 オブジェクトで設定する場合はtypeプロパティにレイアウト名を設定して、あとはそのレイアウト自身のコンフィグを設定できます。

レイアウトごとの特別な設定

ほとんどのレイアウトはレイアウト名の設定だけで、問題なく動作します。
ですがコンフィグを設定することで、より便利な使い方ができます。
また、子アイテムに対して設定が必要だったりするものもあります。 そのうちいくつかをご紹介いたします。

VBox

VBoxレイアウトは、内包するコンポーネントを縦に並べるレイアウトです。
上の「レイアウトを設定する」の項目で紹介したサンプルはこのレイアウトです。 vboxのコンフィグには、どの位置に配置するかを決めるalignやpackがあります。 alignは横方向の位置、packは縦方向の位置となります。 alignにstretchと設定すると、使える幅いっぱいを使うようになります。

1
2
3
4

layout: {
    type: 'vbox',
    align: 'stretch'
}

HBox

HBoxレイアウトは、VBoxレイアウトを90度回転させたものと考えればイメージしやすいでしょうか。
内包するコンポーネントを横に並べるレイアウトです。 hboxのコンフィグにも、alignやpackがあります。 vboxとは逆にalignは縦方向の位置、packは横方向の位置となります。

Anchor

Ancorレイアウトは、アイテムを上から順番に並べて、高さや幅をコンテナーに対して相対的に設定できます。 子アイテムにanchorというコンフィグを設定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Ext.create('Ext.panel.Panel', {
    title: 'Sample Layout',
    width: 200,
    height: 200,
    renderTo: document.body,
 
    layout: 'anchor',
 
    defaults: {
        xtype: 'component'
    },
    items : [{
        style : {'background-color' : 'red'},
        anchor : '90% 20%'
    }, {
        style : {'background-color' : 'yellow'},
        height : 10,
        anchor : '-60'
    }, {
        style : {'background-color' : 'blue'},
        anchor : '90% 20%'
    }, {
        style : {'background-color' : 'green'},
        anchor : '-50 40%'
    }]
});

相対的な設定なので、コンテナーのサイズを動的に変更したとしても、その比率を保つことができます。

Border

Borderレイアウトは、west, north, east, south, centerと、5つの場所に分けて子アイテムを配置します。 子アイテムにregionというコンフィグで場所を指定します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Ext.create('Ext.panel.Panel', {
    title: 'Sample Layout',
    width: 300,
    height: 300,
    renderTo: document.body,
 
    layout: 'border',
 
    defaults: {
        xtype: 'panel',
        margin: 2
    },
    items : [{
        title: 'north',
        region: 'north',
        height: 50
    }, {
        title: 'east',
        region: 'east',
        width: 50
    }, {
        title: 'west',
        region: 'west',
        width: 60
    }, {
        title: 'south',
        region: 'south',
        height: 50
    }, {
        title: 'center',
        region: 'center'
    }]
});

centerのアイテムは必須ですが、他のregionはなくてもかまいません。
アプリケーションのメイン画面などでよく利用されるレイアウトです。

今回はここまで
この2回でSencha フレームワークによるUIを構成する、コンポーネントモデル・レイアウトモデルについて解説しました。
次回は、様々なイベントを扱う方法についてです。
イベントモデル

お楽しみに！