レイアウト[classic] (3)

classicのレイアウトは最後です。

Ext.layout.container.Column

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

端まで到達すると、floatのように自動的に折り返すところがHBoxと異なります。

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

    layout: 'column',

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

アイテムコンポーネントにcolumnWidthコンフィグを指定すると、幅を比率で指定することができます。

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

    layout: 'column',

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

Ext.layout.container.Table

アイテムコンポーネントを表形式にレイアウトします。

イメージとしては、HTMLのtableタグです。実際に作成されるDOMはtableになります。

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

    layout: 'table',

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

Ext.layout.container.Tableのcolumnsコンフィグを指定することで、表の列数を設定できます。

アイテムコンポーネントにrowspanやcolspanコンフィグを指定すると、列方向や行方向のセル結合も可能です。

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

    layout: {
        type: 'table',
        columns: 2
    },

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

あと、アイテムコンポーネントにcellClsコンフィグを指定すると、td要素にクラス名を設定できます。

Ext.layout.container.Absolute

アイテムコンポーネントを絶対位置で配置できます。

座標はx, yコンフィグで指定します。

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

    layout: 'absolute',

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

});