レイアウト[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); } } });
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' } ] });
アイテムコンポーネントに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 } ] });
上記の場合、アイテムコンポーネント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%' } ] });
アイテムコンポーネントの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' } ] });
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 } ] });