レイアウト[modern]
今回はmodernのレイアウトを取り上げます。
classicと説明が同じになっているところは、たぶん気のせいです。
Ext.layout.Default
これは特にレイアウトを指定していない場合に適用されているデフォルトのレイアウトです。
この場合、単純にDOMを順番に配置するだけです。アイテムコンポーネントのスタイル次第です。
/** * レイアウトDefaultのパネル。 * * @class Sample.view.main.layout.DefaultPanel * @extend Ext.Panel */ Ext.define('Sample.view.main.layout.DefaultPanel', { extend: 'Ext.Panel', xtype: 'layout_default_panel', layout: 'default', items: [ { xtype: 'component', cls: 'item-cmp1', html: 'アイテムコンポーネント1' }, { xtype: 'component', cls: 'item-cmp2', html: 'アイテムコンポーネント2' }, { xtype: 'component', cls: 'item-cmp3', html: 'アイテムコンポーネント3' } ] });
Ext.layout.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' }, { xtype: 'component', cls: 'item-cmp2', html: 'アイテムコンポーネント2' }, { xtype: 'component', cls: 'item-cmp3', html: 'アイテムコンポーネント3' } ] });
Ext.layout.Card
アイテムコンポーネントを、layoutコンフィグを設定した親コンポーネントのサイズまで目一杯広げて設置するレイアウトです。
アイテムコンポーネントが複数ある場合は、インデックス番号がより小さい表示可能な(非表示になっていない)アイテムコンポーネントが1つだけ表示されます。
Ext.layout.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' } ] }); /** * メインパネル。 * * @class Sample.view.main.Panel * @extend Ext.Panel */ Ext.define('Sample.view.main.Panel', { extend: 'Ext.Panel', xtype: 'main_panel', cls: 'main-panel', requires: [ 'Sample.view.main.layout.CardPanel' ], layout: 'fit', tools: [ { xtype: 'button', text: 'Next', ui: 'action', handler: function (btn) { var mainPanel = btn.up('main_panel'), cardPanel = mainPanel.down('layout_card_panel'), nextActive = cardPanel.items.indexOf(cardPanel.getActiveItem()) + 1; if (nextActive >= cardPanel.items.length) { nextActive = 0; } cardPanel.setActiveItem(nextActive); } } ], items: { xtype: 'layout_card_panel' } });
Ext.layout.Float
アイテムコンポーネントをfloatで並べます。
/** * レイアウトFloatのパネル。 * * @class Sample.view.main.layout.FloatPanel * @extend Ext.Panel */ Ext.define('Sample.view.main.layout.FloatPanel', { extend: 'Ext.Panel', xtype: 'layout_float_panel', layout: 'float', items: [ { xtype: 'component', cls: 'item-cmp1', html: 'アイテムコンポーネント1' }, { xtype: 'component', cls: 'item-cmp2', html: 'アイテムコンポーネント2' }, { xtype: 'component', cls: 'item-cmp3', html: 'アイテムコンポーネント3' } ] });
Ext.layout.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' } ] });
レイアウトのalignコンフィグで、アイテムコンポーネントの縦方向に対する設定が可能です。alignは↓のように指定します。
layout: { type: 'hbox', align: 'middle' }
middle | end | stretch |
---|---|---|
縦の位置を中央揃えにします。 | 縦の位置を下端に揃えます | 高さを目一杯広げます |
レイアウトのpackコンフィグで、アイテムコンポーネントの横方向に対する設定が可能です。
center | end |
---|---|
横の位置を中央揃えにします | 横の位置を右端に寄せます |
アイテムコンポーネントに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', 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', flex: 1 } ] });
flexを指定したアイテムコンポーネントがある場合、余った部分をflexの値の比率で分け合います。
Ext.layout.VBox
アイテムコンポーネントを縦に並べるレイアウトです。
向きが変わるだけで、Ext.layout.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' } ] });
レイアウトのalignコンフィグで、アイテムコンポーネントの横方向に対する設定が可能です。alignは↓のように指定します。
middle | end | stretch |
---|---|---|
横の位置を中央揃えにします。 | 横の位置を右端に揃えます | 幅を目一杯広げます |
レイアウトのpackコンフィグで、アイテムコンポーネントの縦方向に対する設定が可能です。
center | end |
---|---|
縦の位置を中央揃えにします | 縦の位置を下端に寄せます |
アイテムコンポーネントに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' } ] });