Extjs4 Layouts and Containers

この記事はhttp://docs.sencha.com/ext-js/4-0/#!/guide/layouts_and_containersの抄訳です。


ExtjsのUIはコンポーネントで構成されている。（詳しくはコンポーネントガイド参照）
Containerは他のコンポーネントを子に持つことが出来る。
Containerのネストでレイアウトを作るのが普通。
Containerの一種である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%'
        }
    ]
});

・Layout
layoutを使うとContainer内部のComponentの並べ方をカスタマイズできる。
layoutを指定しないとAutoLayoutになる。
例えば、二つのパネルを横に並べ、それぞれの幅を同じにしてブラウザいっぱいに表示したい場合はColumnレイアウトを使う。

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,
            width: '50%'
        },
        {
            xtype: 'panel',
            title: 'Child Panel 2',
            height: 100,
            width: '50%'
        }
    ]
});

Containerは内部でdoLayoutメソッドを呼んでComponentの初期配置を設定している。
doLayoutメソッドは再帰的にContainerのすべての子孫コンポーネントに対して呼ばれる。
再レイアウトはリサイズされたときなどに行われる。普通はそれで問題ないが、
再レイアウトさせたくない場合はContainerのsuspendLayoutフラグをtrueにすれば再レイアウトされない。
suspendLayoutフラグをfalseにしてdoLayoutメソッドを呼べば再レイアウトが開始される。
ComponentのレイアウトはcomponentLayoutコンフィグで変更できる。