/ext-4.1.0_b3/docs/source/VBox.html
https://bitbucket.org/srogerf/javascript · HTML · 137 lines · 127 code · 10 blank · 0 comment · 0 complexity · b903004b6d8f482abb0679f68bd1f929 MD5 · raw file
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
- <style type="text/css">
- .highlight { display: block; background-color: #ddd; }
- </style>
- <script type="text/javascript">
- function highlight() {
- document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
- }
- </script>
- </head>
- <body onload="prettyPrint(); highlight();">
- <pre class="prettyprint lang-js"><span id='Ext-layout-container-VBox'>/**
- </span> * 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.
- *
- * @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', {
- /* Begin Definitions */
- alias: ['layout.vbox'],
- extend: 'Ext.layout.container.Box',
- alternateClassName: 'Ext.layout.VBoxLayout',
- /* End Definitions */
- <span id='Ext-layout-container-VBox-cfg-align'> /**
- </span> * @cfg {String} align
- * 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
- type: 'vbox',
- direction: 'vertical',
- horizontal: false,
- names: {
- // parallel
- lr: 'tb',
- left: 'top',
- leftCap: 'Top',
- right: 'bottom',
- position: 'top',
- width: 'height',
- widthCap: 'Height',
- widthIndex: 1,
- x: 'y',
- // perpendicular
- center: 'center',
- top: 'left',// 'before',
- topPosition: 'left',
- bottom: 'right',// 'after',
- height: 'width',
- heightCap: 'Width',
- heightIndex: 0,
- y: 'x'
- },
- sizePolicy: {
- flex: {
- '': {
- setsWidth: 0,
- setsHeight: 1
- },
- stretch: {
- setsWidth: 1,
- setsHeight: 1
- },
- stretchmax: {
- readsWidth: 1,
- setsWidth: 1,
- setsHeight: 1
- }
- },
- '': {
- setsWidth: 0,
- setsHeight: 0
- },
- stretch: {
- setsWidth: 1,
- setsHeight: 0
- },
- stretchmax: {
- readsWidth: 1,
- setsWidth: 1,
- setsHeight: 0
- }
- }
- });
- </pre>
- </body>
- </html>