/** * A layout that arranges items vertically down a * {@link Ext.container.Container Container}. This layout optionally divides available * vertical space between child {@link Ext.container.Container#cfg-items items} * containing a numeric {@link Ext.Component#cfg-flex flex} configuration. * * This layout may also be used to set the widths of child items by configuring it with * the {@link #align} option. The vertical position of the child items may be set using * the {@link #pack} config. * * @example * Ext.create('Ext.Panel', { * width: 500, * height: 400, * title: "VBoxLayout Panel", * layout: { * type: 'vbox', * }, * 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 * }] * }); * * The following example may be used to view the outcomes when combining the `align` and * `pack` configs: * * @example * Ext.create({ * xtype: 'panel', * renderTo: Ext.getBody(), * height: 400, * width: 520, * defaultListenerScope: true, * layout: 'vbox', * defaultType: 'button', * items: [{ * text: 'One' * }, { * text: 'Two' * }, { * text: 'Three' * }], * * dockedItems: [{ * xtype: 'toolbar', * dock: 'top', * items: [{ * xtype: 'buttongroup', * title: 'align', * layout: 'fit', * items: [{ * xtype: 'segmentedbutton', * margin: 10, * allowDepress: true, * defaults: { * configType: 'align' // custom config used in this example * }, * items: [{ * text: 'begin' * }, { * text: 'middle' * }, { * text: 'end' * }, { * text: 'stretch' * }, { * text: 'stretchmax' * }], * listeners: { * toggle: 'onToggle' * } * }] * }, '->', { * xtype: 'buttongroup', * title: 'pack', * layout: 'fit', * items: [{ * xtype: 'segmentedbutton', * margin: 10, * allowDepress: true, * defaults: { * configType: 'pack' // custom config used in this example * }, * items: [{ * text: 'start' * }, { * text: 'center' * }, { * text: 'end' * }], * listeners: { * toggle: 'onToggle' * } * }] * }] * }], * * onToggle: function (group, button, isPressed) { * var cfg = {}; * * cfg[button.configType] = isPressed ? button.getText() : null; * this.setLayout(cfg); * } * }); */Ext.define('Ext.layout.container.VBox', { extend: 'Ext.layout.container.Box', alias: 'layout.vbox', alternateClassName: 'Ext.layout.VBoxLayout', type: 'vbox', vertical: true});