レイアウト[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' } ] });
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' } ] });
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' } ] });
レイアウトのalignコンフィグで、アイテムコンポーネントの縦方向に対する設定が可能です。alignは↓のように指定します。
layout: { type: 'hbox', align: 'middle' }
middle | end | stretch | stretchmax |
---|---|---|---|
縦の位置を中央揃えにします。 | 縦の位置を下端に揃えます | 高さを目一杯広げます | 高さを一番高いアイテムコンポーネントに揃えます |
レイアウトの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', 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' } ] });
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' } ] });
レイアウトのalignコンフィグで、アイテムコンポーネントの横方向に対する設定が可能です。alignは↓のように指定します。
middle | end | stretch | stretchmax |
---|---|---|---|
横の位置を中央揃えにします。 | 横の位置を右端に揃えます | 幅を目一杯広げます | 幅を一番広いアイテムコンポーネントに揃えます |
レイアウトの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' } ] });