初心者のためのExtJS入門

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

レイアウト[classic] (2)

続きです。

Ext.layout.container.Card

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

アイテムコンポーネントが複数ある場合は、インデックス番号がより小さい表示可能な(非表示になっていない)アイテムコンポーネントが1つだけ表示されます。

Ext.layout.container.Fitに似ていますが、さらに表示するアイテムコンポーネントを切り替える機能を持ちます。

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

    layout: 'card',

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

    dockedItems: {
        dock: 'bottom',
        xtype: 'button',
        text: 'Next',
        handler: function (btn) {
            var panel = btn.up(),
                layout = panel.getLayout(),
                nextActive = panel.items.indexOf(layout.getActiveItem()) + 1;

            if (nextActive >= panel.items.length) {
                nextActive = 0;
            }

            layout.setActiveItem(nextActive);
        }
    }
});

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

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

Nextボタンを押すと、次のアイテムコンポーネントに切り替わります。

getActiveItem、setActiveItemメソッドを使って、現在表示されているアイテムコンポーネントを取得したり切り替えたりできます。

Ext.layout.container.Border

アイテムコンポーネントを、layoutコンフィグを設定した親コンポーネントの中央・東・西・南・北の位置に配置するレイアウトです。

どの位置に配置するかは、アイテムコンポーネントのregionコンフィグで指定します。

位置 regionに指定する文字列
中央 center
east
西 west
south
north
/**
 * レイアウトBorderのパネル。
 *
 * @class Sample.view.main.layout.BorderPanel
 * @extend Ext.Panel
 */
Ext.define('Sample.view.main.layout.BorderPanel', {
    extend: 'Ext.Panel',
    xtype: 'layout_border_panel',

    layout: 'border',

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

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

アイテムコンポーネントにweightコンフィグを指定すると、東西南北のどれを目一杯広げるかを制御できます。

weightの値が大きい方が優先されます。

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

    layout: 'border',

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

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

上記の場合、アイテムコンポーネント2よりアイテムコンポーネント3のほうがweightの値が大きいので、アイテムコンポーネント3が目一杯大きく表示されています。

Ext.layout.container.Anchor

このレイアウトでは、VBoxのようにアイテムコンポーネントは縦に並びます。

ただし、アイテムコンポーネントの大きさを親の大きさと相対的に指定することができるという特徴があります。

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

    scrollable: true,

    layout: 'anchor',

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

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

アイテムコンポーネントのanchorコンフィグには、親との相対サイズ(幅 高さ)をパーセントまたはピクセルで指定します。

上記の場合、アイテムコンポーネント1はanchor: ‘75% 20%'としていますが、これは↓を意味します。

幅 = (親コンポーネントの幅) * 0.75
高さ = (親コンポーネントの高さ) * 0.2

また、アイテムコンポーネント2のanchor: ‘-300 -200'は↓を意味します。

幅 = (親コンポーネントの幅) - 300px
高さ = (親コンポーネントの高さ) - 200px

Ext.layout.container.Accordion

今では当たり前となったアコーディオンレイアウトです。

アコーディオンレイアウトの親コンポーネントに複数のアイテムコンポーネントを設置すると、1つだけ開くことができます。

注意点としては、アイテムコンポーネントはExt.Panelでなければなりません(もしくはExt.Panelを継承したクラス)。

なので、↓でもxtype: ‘panel'としています。

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

    layout: 'accordion',

    items: [
        {
            xtype: 'panel',
            cls: 'item-panel1',
            title: 'アイテムコンポーネント1'
        },
        {
            xtype: 'panel',
            cls: 'item-panel2',
            title: 'アイテムコンポーネント2'
        },
        {
            xtype: 'panel',
            cls: 'item-panel3',
            title: 'アイテムコンポーネント3'
        }
    ]
});

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

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

Ext.layout.container.Center

アイテムコンポーネントを親コンポーネントの中央に配置するレイアウトです。

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

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

    layout: 'center',

    items: [
        {
            xtype: 'component',
            cls: 'item-cmp1',
            html: 'アイテムコンポーネント1',
            width: 200,
            height: 100
        }
    ]
});

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