X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/layout/container/VBox.js diff --git a/src/layout/container/VBox.js b/src/layout/container/VBox.js index 8783b774..c1934261 100644 --- a/src/layout/container/VBox.js +++ b/src/layout/container/VBox.js @@ -13,39 +13,40 @@ If you are unsure which license is appropriate for your use, please contact the */ /** - * @class Ext.layout.container.VBox - * @extends Ext.layout.container.Box - *

A layout that arranges items vertically down a Container. This layout optionally divides available vertical - * space between child items containing a numeric flex configuration.

+ * A layout that arranges items vertically down a Container. This layout optionally divides available vertical space + * between child items containing a numeric `flex` configuration. + * * 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 - }] - }); + * + * @example + * 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', { @@ -54,23 +55,17 @@ Ext.define('Ext.layout.container.VBox', { 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: - *
+ * Controls how the child items of the container are aligned. Acceptable configuration values for this property are: + * + * - **left** : **Default** child items are aligned horizontally at the **left** side of the container + * - **center** : child items are aligned horizontally at the **mid-width** of the container + * - **stretch** : child items are stretched horizontally to fill the width of the container + * - **stretchmax** : child items are stretched horizontally to the size of the largest item. */ align : 'left', // left, center, stretch, strechmax