PageRenderTime 193ms CodeModel.GetById 61ms app.highlight 6ms RepoModel.GetById 1ms app.codeStats 0ms

/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
  1<!DOCTYPE html>
  2<html>
  3<head>
  4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5  <title>The source code</title>
  6  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7  <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8  <style type="text/css">
  9    .highlight { display: block; background-color: #ddd; }
 10  </style>
 11  <script type="text/javascript">
 12    function highlight() {
 13      document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
 14    }
 15  </script>
 16</head>
 17<body onload="prettyPrint(); highlight();">
 18  <pre class="prettyprint lang-js"><span id='Ext-layout-container-VBox'>/**
 19</span> * A layout that arranges items vertically down a Container. This layout optionally divides available vertical space
 20 * between child items containing a numeric `flex` configuration.
 21 *
 22 * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.
 23 *
 24 *     @example
 25 *     Ext.create('Ext.Panel', {
 26 *         width: 500,
 27 *         height: 400,
 28 *         title: &quot;VBoxLayout Panel&quot;,
 29 *         layout: {
 30 *             type: 'vbox',
 31 *             align: 'center'
 32 *         },
 33 *         renderTo: document.body,
 34 *         items: [{
 35 *             xtype: 'panel',
 36 *             title: 'Inner Panel One',
 37 *             width: 250,
 38 *             flex: 2
 39 *         },
 40 *         {
 41 *             xtype: 'panel',
 42 *             title: 'Inner Panel Two',
 43 *             width: 250,
 44 *             flex: 4
 45 *         },
 46 *         {
 47 *             xtype: 'panel',
 48 *             title: 'Inner Panel Three',
 49 *             width: '50%',
 50 *             flex: 4
 51 *         }]
 52 *     });
 53 */
 54Ext.define('Ext.layout.container.VBox', {
 55
 56    /* Begin Definitions */
 57
 58    alias: ['layout.vbox'],
 59    extend: 'Ext.layout.container.Box',
 60    alternateClassName: 'Ext.layout.VBoxLayout',
 61
 62    /* End Definitions */
 63
 64<span id='Ext-layout-container-VBox-cfg-align'>    /**
 65</span>     * @cfg {String} align
 66     * Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
 67     *
 68     * - **left** : **Default** child items are aligned horizontally at the **left** side of the container
 69     * - **center** : child items are aligned horizontally at the **mid-width** of the container
 70     * - **stretch** : child items are stretched horizontally to fill the width of the container
 71     * - **stretchmax** : child items are stretched horizontally to the size of the largest item.
 72     */
 73    align : 'left', // left, center, stretch, strechmax
 74
 75    type: 'vbox',
 76
 77    direction: 'vertical',
 78
 79    horizontal: false,
 80
 81    names: {
 82        // parallel
 83        lr: 'tb',
 84        left: 'top',
 85        leftCap: 'Top',
 86        right: 'bottom',
 87        position: 'top',
 88        width: 'height',
 89        widthCap: 'Height',
 90        widthIndex: 1,
 91        x: 'y',
 92
 93        // perpendicular
 94        center: 'center',
 95        top: 'left',// 'before',
 96        topPosition: 'left',
 97        bottom: 'right',// 'after',
 98        height: 'width',
 99        heightCap: 'Width',
100        heightIndex: 0,
101        y: 'x'
102    },
103
104    sizePolicy: {
105        flex: {
106            '': {
107                setsWidth: 0,
108                setsHeight: 1
109            },
110            stretch: {
111                setsWidth: 1,
112                setsHeight: 1
113            },
114            stretchmax: {
115                readsWidth: 1,
116                setsWidth: 1,
117                setsHeight: 1
118            }
119        },
120        '': {
121            setsWidth: 0,
122            setsHeight: 0
123        },
124        stretch: {
125            setsWidth: 1,
126            setsHeight: 0
127        },
128        stretchmax: {
129            readsWidth: 1,
130            setsWidth: 1,
131            setsHeight: 0
132        }
133    }
134});
135</pre>
136</body>
137</html>