/**
* @class Ext.layout.container.VBox
* @extends Ext.layout.container.Box
* <p>A layout that arranges items vertically down a Container. This layout optionally divides available vertical
* space between child items containing a numeric <code>flex</code> configuration.</p>
* This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
* {@img Ext.layout.container.VBox/Ext.layout.container.VBox.png Ext.layout.container.VBox container layout}
* Example usage:
Ext.create('Ext.Panel', {
width: 500,
height: 400,
title: "VBoxLayout Panel",
layout: {
type: 'vbox',
align: 'center'
},
renderTo: document.body,
items: [{
xtype: 'panel',
title: 'Inner Panel One',
width: 250,
flex: 2
},{
xtype: 'panel',
title: 'Inner Panel Two',
width: 250,
flex: 4
},{
xtype: 'panel',
title: 'Inner Panel Three',
width: '50%',
flex: 4
}]
});
*/
Ext.define('Ext.layout.container.VBox', {
/* Begin Definitions */
alias: ['layout.vbox'],
extend: 'Ext.layout.container.Box',
alternateClassName: 'Ext.layout.VBoxLayout',
/* End Definitions */
/**
* @cfg {String} align
* Controls how the child items of the container are aligned. Acceptable configuration values for this
* property are:
* <div class="mdetail-params"><ul>
* <li><b><tt>left</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned horizontally
* at the <b>left</b> side of the container</div></li>
* <li><b><tt>center</tt></b> : <div class="sub-desc">child items are aligned horizontally at the
* <b>mid-width</b> of the container</div></li>
* <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched horizontally to fill
* the width of the container</div></li>
* <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched horizontally to
* the size of the largest item.</div></li>
* </ul></div>
*/
align : 'left', // left, center, stretch, strechmax
//@private
alignCenteringString: 'center',
type: 'vbox',
direction: 'vertical',
// When creating an argument list to setSize, use this order
parallelSizeIndex: 1,
perpendicularSizeIndex: 0,
parallelPrefix: 'height',
parallelPrefixCap: 'Height',
parallelLT: 't',
parallelRB: 'b',
parallelBefore: 'top',
parallelBeforeCap: 'Top',
parallelAfter: 'bottom',
parallelPosition: 'y',
perpendicularPrefix: 'width',
perpendicularPrefixCap: 'Width',
perpendicularLT: 'l',
perpendicularRB: 'r',
perpendicularLeftTop: 'left',
perpendicularRightBottom: 'right',
perpendicularPosition: 'x'
});