docs/source/HBox.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-HBox'>/**
  19 </span> * A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
  20  * space between child items containing a numeric `flex` configuration.
  21  *
  22  * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.
  23  *
  24  *     @example
  25  *     Ext.create('Ext.Panel', {
  26  *         width: 500,
  27  *         height: 300,
  28  *         title: &quot;HBoxLayout Panel&quot;,
  29  *         layout: {
  30  *             type: 'hbox',
  31  *             align: 'stretch'
  32  *         },
  33  *         renderTo: document.body,
  34  *         items: [{
  35  *             xtype: 'panel',
  36  *             title: 'Inner Panel One',
  37  *             flex: 2
  38  *         },{
  39  *             xtype: 'panel',
  40  *             title: 'Inner Panel Two',
  41  *             flex: 1
  42  *         },{
  43  *             xtype: 'panel',
  44  *             title: 'Inner Panel Three',
  45  *             flex: 1
  46  *         }]
  47  *     });
  48  */
  49 Ext.define('Ext.layout.container.HBox', {
  50
  51     /* Begin Definitions */
  52
  53     alias: ['layout.hbox'],
  54     extend: 'Ext.layout.container.Box',
  55     alternateClassName: 'Ext.layout.HBoxLayout',
  56
  57     /* End Definitions */
  58
  59 <span id='Ext-layout-container-HBox-cfg-align'>    /**
  60 </span>     * @cfg {String} align
  61      * Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
  62      *
  63      * - **top** : **Default** child items are aligned vertically at the **top** of the container
  64      * - **middle** : child items are aligned vertically in the **middle** of the container
  65      * - **stretch** : child items are stretched vertically to fill the height of the container
  66      * - **stretchmax** : child items are stretched vertically to the height of the largest item.
  67      */
  68     align: 'top', // top, middle, stretch, strechmax
  69
  70     //@private
  71     alignCenteringString: 'middle',
  72
  73     type : 'hbox',
  74
  75     direction: 'horizontal',
  76
  77     // When creating an argument list to setSize, use this order
  78     parallelSizeIndex: 0,
  79     perpendicularSizeIndex: 1,
  80
  81     parallelPrefix: 'width',
  82     parallelPrefixCap: 'Width',
  83     parallelLT: 'l',
  84     parallelRB: 'r',
  85     parallelBefore: 'left',
  86     parallelBeforeCap: 'Left',
  87     parallelAfter: 'right',
  88     parallelPosition: 'x',
  89
  90     perpendicularPrefix: 'height',
  91     perpendicularPrefixCap: 'Height',
  92     perpendicularLT: 't',
  93     perpendicularRB: 'b',
  94     perpendicularLeftTop: 'top',
  95     perpendicularRightBottom: 'bottom',
  96     perpendicularPosition: 'y',
  97     configureItem: function(item) {
  98         if (item.flex) {
  99             item.layoutManagedWidth = 1;
 100         } else {
 101             item.layoutManagedWidth = 2;
 102         }
 103
 104         if (this.align === 'stretch' || this.align === 'stretchmax') {
 105             item.layoutManagedHeight = 1;
 106         } else {
 107             item.layoutManagedHeight = 2;
 108         }
 109         this.callParent(arguments);
 110     }
 111 });</pre>
 112 </body>
 113 </html>