docs/source/VBox.html

   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  */
  54 Ext.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     //@private
  76     alignCenteringString: 'center',
  77
  78     type: 'vbox',
  79
  80     direction: 'vertical',
  81
  82     // When creating an argument list to setSize, use this order
  83     parallelSizeIndex: 1,
  84     perpendicularSizeIndex: 0,
  85
  86     parallelPrefix: 'height',
  87     parallelPrefixCap: 'Height',
  88     parallelLT: 't',
  89     parallelRB: 'b',
  90     parallelBefore: 'top',
  91     parallelBeforeCap: 'Top',
  92     parallelAfter: 'bottom',
  93     parallelPosition: 'y',
  94
  95     perpendicularPrefix: 'width',
  96     perpendicularPrefixCap: 'Width',
  97     perpendicularLT: 'l',
  98     perpendicularRB: 'r',
  99     perpendicularLeftTop: 'left',
 100     perpendicularRightBottom: 'right',
 101     perpendicularPosition: 'x',
 102     configureItem: function(item) {
 103         if (item.flex) {
 104             item.layoutManagedHeight = 1;
 105         } else {
 106             item.layoutManagedHeight = 2;
 107         }
 108
 109         if (this.align === 'stretch' || this.align === 'stretchmax') {
 110             item.layoutManagedWidth = 1;
 111         } else {
 112             item.layoutManagedWidth = 2;
 113         }
 114         this.callParent(arguments);
 115     }
 116 });</pre>
 117 </body>
 118 </html>