/**
 * The VBox (short for vertical box) layout makes it easy to position items vertically in a
 * {@link Ext.Container Container}. It can size items based on a fixed height or a fraction
 * of the total height available.
 *
 * For example, let's say we want a banner to take one third of the available height, and an
 * information panel in the rest of the screen. We can achieve this with vbox layout's *flex*
 * config:
 * ```javascript
 *  @example({ framework: 'extjs' })
 *     Ext.create('Ext.Container', {
 *         fullscreen: true,
 *         layout: 'vbox',
 *         items: [
 *             {
 *                 html: 'Awesome banner',
 *                 style: 'background-color: #759E60;',
 *                 flex: 1
 *             },
 *             {
 *                 html: 'Some wonderful information',
 *                 style: 'background-color: #5E99CC;',
 *                 flex: 2
 *             }
 *         ]
 *     });
 * ```
 * ```javascript
 * @example({framework: 'ext-react', packages:['ext-react']})
 * import React, { Component } from 'react';
 * import { ExtContainer, ExtPanel } from '@sencha/ext-react';
 *
 * export default class myExample extends Component {
 *     render() {
 *         return (
 *             <ExtContainer layout="vbox">
 *                 <ExtPanel title="Inner Panel 1" flex="1">
 *                     This is the inner panel content
 *                 </ExtPanel>
 *                 <ExtPanel title="Inner Panel 2" flex="1">
 *                     This is the inner panel content
 *                 </ExtPanel>
 *             </ExtContainer>
 *         )
 *     }
 * }
 * ```
 * ```javascript
 * @example({framework: 'ext-angular', packages:['ext-angular']})
 * import { Component } from '@angular/core'
 * declare var Ext: any;
 *
 * @Component({
 *     selector: 'app-root-1',
 *      styles: [``],
 *     template: `
 *         <ExtContainer layout="vbox">
 *             <ExtPanel title="Inner Panel 1" flex="1">
 *                 This is the inner panel content
 *             </ExtPanel>
 *             <ExtPanel title="Inner Panel 2" flex="1">
 *                 This is the inner panel content
 *             </ExtPanel>
 *          </ExtContainer>
 *     `
 * })
 * export class AppComponent {} 
 * ```
 * ```html
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 1 })
 * <ext-container layout="vbox">
 *    <ext-panel title="Inner Panel 1" flex="1">
 *         This is the inner panel content
 *    </ext-panel>
 *    <ext-panel title="Inner Panel 2" height="100">
 *         This is the inner panel content
 *    </ext-panel>
 *    <ext-panel title="Inner Panel 3" flex="1">
 *         This is the inner panel content
 *    </ext-panel>
 * </ext-container>
 * ```
 * ```javascript
 * @example({framework: 'ext-web-components', packages:['ext-web-components'], tab: 2 })
 * import '@sencha/ext-web-components/dist/ext-container.component';
 * import '@sencha/ext-web-components/dist/ext-panel.component';
 *
 * export default class myExample extends Component {} 
 * ```
 *
 * This will give us two boxes - one that's one third of the available height, the other being two
 * thirds of the available height.
 *
 * We can also specify fixed heights for child items, or mix fixed heights and flexes. For example,
 * here we have 3 items
 * - one at the top and bottom with flex: 1, and one in the center with a fixed width of 100px:
 *
 *     @example
 *     Ext.create('Ext.Container', {
 *         fullscreen: true,
 *         layout: 'vbox',
 *         items: [
 *             {
 *                 html: 'Top item',
 *                 style: 'background-color: #5E99CC;',
 *                 flex: 1
 *             },
 *             {
 *                 html: 'Center item',
 *                 height: 100
 *             },
 *             {
 *                 html: 'Bottom item',
 *                 style: 'background-color: #759E60;',
 *                 flex: 1
 *             }
 *         ]
 *     });
 */
Ext.define('Ext.layout.VBox', {
    extend: 'Ext.layout.Box',
 
    alias: 'layout.vbox',
 
    config: {
        vertical: true
    }
});