X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..HEAD:/docs/source/HBox.html diff --git a/docs/source/HBox.html b/docs/source/HBox.html index 0512b9ed..d09d484a 100644 --- a/docs/source/HBox.html +++ b/docs/source/HBox.html @@ -3,8 +3,8 @@ The source code - - + + @@ -16,36 +16,35 @@
/**
- * @class Ext.layout.container.HBox
- * @extends Ext.layout.container.Box
- * <p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
- * space between child items containing a numeric <code>flex</code> configuration.</p>
+ * A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal
+ * space between child items containing a numeric `flex` configuration.
+ *
  * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.
- * {@img Ext.layout.container.HBox/Ext.layout.container.HBox.png Ext.layout.container.HBox container layout}
- * Example usage:
-    Ext.create('Ext.Panel', {
-        width: 500,
-        height: 300,
-        title: "HBoxLayout Panel",
-        layout: {
-            type: 'hbox',
-            align: 'stretch'
-        },
-        renderTo: document.body,
-        items: [{
-            xtype: 'panel',
-            title: 'Inner Panel One',
-            flex: 2
-        },{
-            xtype: 'panel',
-            title: 'Inner Panel Two',
-            flex: 1
-        },{
-            xtype: 'panel',
-            title: 'Inner Panel Three',
-            flex: 1
-        }]
-    });
+ *
+ *     @example
+ *     Ext.create('Ext.Panel', {
+ *         width: 500,
+ *         height: 300,
+ *         title: "HBoxLayout Panel",
+ *         layout: {
+ *             type: 'hbox',
+ *             align: 'stretch'
+ *         },
+ *         renderTo: document.body,
+ *         items: [{
+ *             xtype: 'panel',
+ *             title: 'Inner Panel One',
+ *             flex: 2
+ *         },{
+ *             xtype: 'panel',
+ *             title: 'Inner Panel Two',
+ *             flex: 1
+ *         },{
+ *             xtype: 'panel',
+ *             title: 'Inner Panel Three',
+ *             flex: 1
+ *         }]
+ *     });
  */
 Ext.define('Ext.layout.container.HBox', {
 
@@ -54,23 +53,17 @@ Ext.define('Ext.layout.container.HBox', {
     alias: ['layout.hbox'],
     extend: 'Ext.layout.container.Box',
     alternateClassName: 'Ext.layout.HBoxLayout',
-    
+
     /* End Definitions */
 
     /**
      * @cfg {String} align
-     * Controls how the child items of the container are aligned. Acceptable configuration values for this
-     * property are:
-     * <div class="mdetail-params"><ul>
-     * <li><b><tt>top</tt></b> : <b>Default</b><div class="sub-desc">child items are aligned vertically
-     * at the <b>top</b> of the container</div></li>
-     * <li><b><tt>middle</tt></b> : <div class="sub-desc">child items are aligned vertically in the
-     * <b>middle</b> of the container</div></li>
-     * <li><b><tt>stretch</tt></b> : <div class="sub-desc">child items are stretched vertically to fill
-     * the height of the container</div></li>
-     * <li><b><tt>stretchmax</tt></b> : <div class="sub-desc">child items are stretched vertically to
-     * the height of the largest item.</div></li>
-     * </ul></div>
+     * Controls how the child items of the container are aligned. Acceptable configuration values for this property are:
+     *
+     * - **top** : **Default** child items are aligned vertically at the **top** of the container
+     * - **middle** : child items are aligned vertically in the **middle** of the container
+     * - **stretch** : child items are stretched vertically to fill the height of the container
+     * - **stretchmax** : child items are stretched vertically to the height of the largest item.
      */
     align: 'top', // top, middle, stretch, strechmax
 
@@ -100,7 +93,21 @@ Ext.define('Ext.layout.container.HBox', {
     perpendicularRB: 'b',
     perpendicularLeftTop: 'top',
     perpendicularRightBottom: 'bottom',
-    perpendicularPosition: 'y'
+    perpendicularPosition: 'y',
+    configureItem: function(item) {
+        if (item.flex) {
+            item.layoutManagedWidth = 1;
+        } else {
+            item.layoutManagedWidth = 2;
+        }
+
+        if (this.align === 'stretch' || this.align === 'stretchmax') {
+            item.layoutManagedHeight = 1;
+        } else {
+            item.layoutManagedHeight = 2;
+        }
+        this.callParent(arguments);
+    }
 });