初心者のためのExtJS入門

ExtJSを使うので、ついでにまとめていきます

レイアウト[classic] (1)

今回はclassicのレイアウトを取り上げます(何回かに分けます)。

レイアウトの種類によって、パネルやコンテナに設置するアイテムコンポーネントの配置が変わります。

レイアウトは、layoutコンフィグで設定します。

Ext.layout.container.Auto

これは特にレイアウトを指定していない場合に適用されているデフォルトのレイアウトです。

この場合、単純にDOMを順番に配置するだけです。アイテムコンポーネントのスタイル次第です。

アイテムコンポーネントがdisplay: blockなら、縦に並びます。float: leftでも付けていれば、横に並ぶことでしょう。

/**
 * レイアウトAutoのパネル。
 *
 * @class Sample.view.main.layout.AutoPanel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.main.layout.AutoPanel', {
    extend: 'Ext.Panel',
    xtype: 'layout_auto_panel',

    scrollable: true,

    layout: 'auto',

    items: [
        {
            xtype: 'component',
            cls: 'item-cmp1',
            html: 'アイテムコンポーネント1'
        },
        {
            xtype: 'component',
            cls: 'item-cmp2',
            html: 'アイテムコンポーネント2'
        },
        {
            xtype: 'component',
            cls: 'item-cmp3',
            html: 'アイテムコンポーネント3'
        }
    ]
});

f:id:sham-memo:20170401152608p:plain

Ext.layout.container.Fit

アイテムコンポーネントを、layoutコンフィグを設定した親コンポーネントのサイズまで目一杯広げて設置するレイアウトです。

アイテムコンポーネントが複数ある場合は、表示できるものが1つだけ表示されます。

/**
 * レイアウトFitのパネル。
 *
 * @class Sample.view.main.layout.FitPanel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.main.layout.FitPanel', {
    extend: 'Ext.Panel',
    xtype: 'layout_fit_panel',

    layout: 'fit',

    items: [
        {
            xtype: 'component',
            cls: 'item-cmp1',
            html: 'アイテムコンポーネント1',
            hidden: true
        },
        {
            xtype: 'component',
            cls: 'item-cmp2',
            html: 'アイテムコンポーネント2'
        },
        {
            xtype: 'component',
            cls: 'item-cmp3',
            html: 'アイテムコンポーネント3'
        }
    ]
});

f:id:sham-memo:20170401153450p:plain

Ext.layout.container.HBox

アイテムコンポーネントを横に並べるレイアウトです。

アイテムコンポーネントが右端に到達しても折り返しされません。

/**
 * レイアウトHBoxのパネル。
 *
 * @class Sample.view.main.layout.HboxPanel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.main.layout.HboxPanel', {
    extend: 'Ext.Panel',
    xtype: 'layout_hbox_panel',

    scrollable: true,

    layout: 'hbox',

    items: [
        {
            xtype: 'component',
            cls: 'item-cmp1',
            html: 'アイテムコンポーネント1'
        },
        {
            xtype: 'component',
            cls: 'item-cmp2',
            html: 'アイテムコンポーネント2'
        },
        {
            xtype: 'component',
            cls: 'item-cmp3',
            html: 'アイテムコンポーネント3'
        }
    ]
});

f:id:sham-memo:20170401154002p:plain

レイアウトのalignコンフィグで、アイテムコンポーネントの縦方向に対する設定が可能です。alignは↓のように指定します。

layout: {
    type: 'hbox',
    align: 'middle'
}
middle end stretch stretchmax
縦の位置を中央揃えにします。 縦の位置を下端に揃えます 高さを目一杯広げます 高さを一番高いアイテムコンポーネントに揃えます
f:id:sham-memo:20170401154648p:plain f:id:sham-memo:20170401155556p:plain f:id:sham-memo:20170401155313p:plain f:id:sham-memo:20170401155745p:plain

レイアウトのpackコンフィグで、アイテムコンポーネントの横方向に対する設定が可能です。

center end
横の位置を中央揃えにします 横の位置を右端に寄せます
f:id:sham-memo:20170401160336p:plain f:id:sham-memo:20170401160159p:plain

アイテムコンポーネントflexを指定することで、flexを指定したアイテムコンポーネントだけ目一杯幅を広げることができます。

/**
 * レイアウトHBoxのパネル。
 *
 * @class Sample.view.main.layout.HboxPanel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.main.layout.HboxPanel', {
    extend: 'Ext.Panel',
    xtype: 'layout_hbox_panel',

    scrollable: true,

    layout: 'hbox',

    items: [
        {
            xtype: 'component',
            cls: 'item-cmp1',
            html: 'アイテムコンポーネント1',
            flex: 1
        },
        {
            xtype: 'component',
            cls: 'item-cmp2',
            html: 'アイテムコンポーネント2',
            flex: 2
        },
        {
            xtype: 'component',
            cls: 'item-cmp3',
            html: 'アイテムコンポーネント3'
        }
    ]
});

f:id:sham-memo:20170401160720p:plain

flexを指定したアイテムコンポーネントがある場合、余った部分をflexの値の比率で分け合います。

上記の例だと、親パネルの幅からアイテムコンポーネント3の幅を引いた部分が余った部分で、その余った部分を、アイテムコンポーネント1 : アイテムコンポーネント2 = 1 : 2の比率で分け合います。

Ext.layout.container.VBox

アイテムコンポーネントを縦に並べるレイアウトです。

向きが変わるだけで、Ext.layout.container.HBoxと同じようなことができます。

/**
 * レイアウトVBoxのパネル。
 *
 * @class Sample.view.main.layout.VboxPanel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.main.layout.VboxPanel', {
    extend: 'Ext.Panel',
    xtype: 'layout_vbox_panel',

    layout: 'vbox',

    items: [
        {
            xtype: 'component',
            cls: 'item-cmp1',
            html: 'アイテムコンポーネント1'
        },
        {
            xtype: 'component',
            cls: 'item-cmp2',
            html: 'アイテムコンポーネント2'
        },
        {
            xtype: 'component',
            cls: 'item-cmp3',
            html: 'アイテムコンポーネント3'
        }
    ]
});

f:id:sham-memo:20170403223943p:plain

レイアウトのalignコンフィグで、アイテムコンポーネントの横方向に対する設定が可能です。alignは↓のように指定します。

middle end stretch stretchmax
横の位置を中央揃えにします。 横の位置を右端に揃えます 幅を目一杯広げます 幅を一番広いアイテムコンポーネントに揃えます
f:id:sham-memo:20170403225708p:plain f:id:sham-memo:20170403225822p:plain f:id:sham-memo:20170403225946p:plain f:id:sham-memo:20170403230208p:plain

レイアウトのpackコンフィグで、アイテムコンポーネントの縦方向に対する設定が可能です。

center end
縦の位置を中央揃えにします 縦の位置を下端に寄せます
f:id:sham-memo:20170403231149p:plain f:id:sham-memo:20170403231255p:plain

アイテムコンポーネントflexを指定することで、flexを指定したアイテムコンポーネントだけ目一杯高さを広げることができます。

/**
 * レイアウトVBoxのパネル。
 *
 * @class Sample.view.main.layout.VboxPanel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.main.layout.VboxPanel', {
    extend: 'Ext.Panel',
    xtype: 'layout_vbox_panel',

    layout: 'vbox',

    items: [
        {
            xtype: 'component',
            cls: 'item-cmp1',
            html: 'アイテムコンポーネント1',
            flex: 1
        },
        {
            xtype: 'component',
            cls: 'item-cmp2',
            html: 'アイテムコンポーネント2',
            flex: 2
        },
        {
            xtype: 'component',
            cls: 'item-cmp3',
            html: 'アイテムコンポーネント3'
        }
    ]
});

f:id:sham-memo:20170403231814p:plain