Upgrade to ExtJS 3.0.3 - Released 10/11/2009
[extjs.git] / docs / source / BoxLayout.html
index e6c24b1..b9142d0 100644 (file)
@@ -1,11 +1,17 @@
-<html>\r
-<head>\r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.layout.BoxLayout"></div>/**\r
+<html>
+<head>
+  <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>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.0.3
+ * Copyright(c) 2006-2009 Ext JS, LLC
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+<div id="cls-Ext.layout.BoxLayout"></div>/**\r
  * @class Ext.layout.BoxLayout\r
  * @extends Ext.layout.ContainerLayout\r
  * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>\r
  * @class Ext.layout.BoxLayout\r
  * @extends Ext.layout.ContainerLayout\r
  * <p>Base Class for HBoxLayout and VBoxLayout Classes. Generally it should not need to be used directly.</p>\r
@@ -43,8 +49,20 @@ Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
     defaultMargins : {left:0,top:0,right:0,bottom:0},\r
     <div id="cfg-Ext.layout.BoxLayout-padding"></div>/**\r
      * @cfg {String} padding\r
     defaultMargins : {left:0,top:0,right:0,bottom:0},\r
     <div id="cfg-Ext.layout.BoxLayout-padding"></div>/**\r
      * @cfg {String} padding\r
-     * Defaults to <tt>'0'</tt>. Sets the padding to be applied to all child items managed by this\r
-     * container's layout. \r
+     * <p>Sets the padding to be applied to all child items managed by this layout.</p> \r
+     * <p>This property must be specified as a string containing\r
+     * space-separated, numeric padding values. The order of the sides associated\r
+     * with each value matches the way CSS processes padding values:</p>\r
+     * <div class="mdetail-params"><ul>\r
+     * <li>If there is only one value, it applies to all sides.</li>\r
+     * <li>If there are two values, the top and bottom borders are set to the\r
+     * first value and the right and left are set to the second.</li>\r
+     * <li>If there are three values, the top is set to the first value, the left\r
+     * and right are set to the second, and the bottom is set to the third.</li>\r
+     * <li>If there are four values, they apply to the top, right, bottom, and\r
+     * left, respectively.</li>\r
+     * </ul></div>\r
+     * <p>Defaults to: <code>"0"</code></p>\r
      */\r
     padding : '0',\r
     // documented in subclasses\r
      */\r
     padding : '0',\r
     // documented in subclasses\r
@@ -56,6 +74,13 @@ Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
     extraCls : 'x-box-item',\r
     ctCls : 'x-box-layout-ct',\r
     innerCls : 'x-box-inner',\r
     extraCls : 'x-box-item',\r
     ctCls : 'x-box-layout-ct',\r
     innerCls : 'x-box-inner',\r
+    \r
+    constructor : function(config){\r
+        Ext.layout.BoxLayout.superclass.constructor.call(this, config);\r
+        if(Ext.isString(this.defaultMargins)){\r
+            this.defaultMargins = this.parseMargins(this.defaultMargins);\r
+        }\r
+    },\r
 \r
     // private\r
     isValidParent : function(c, target){\r
 \r
     // private\r
     isValidParent : function(c, target){\r
@@ -79,7 +104,7 @@ Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
 \r
     // private\r
     renderItem : function(c){\r
 \r
     // private\r
     renderItem : function(c){\r
-        if(typeof c.margins == 'string'){\r
+        if(Ext.isString(c.margins)){\r
             c.margins = this.parseMargins(c.margins);\r
         }else if(!c.margins){\r
             c.margins = this.defaultMargins;\r
             c.margins = this.parseMargins(c.margins);\r
         }else if(!c.margins){\r
             c.margins = this.defaultMargins;\r
@@ -110,7 +135,9 @@ Ext.layout.BoxLayout = Ext.extend(Ext.layout.ContainerLayout, {
 <div id="cls-Ext.layout.VBoxLayout"></div>/**\r
  * @class Ext.layout.VBoxLayout\r
  * @extends Ext.layout.BoxLayout\r
 <div id="cls-Ext.layout.VBoxLayout"></div>/**\r
  * @class Ext.layout.VBoxLayout\r
  * @extends Ext.layout.BoxLayout\r
- * A layout that arranges items vertically\r
+ * <p>A layout that arranges items vertically down a Container. This layout optionally divides available vertical\r
+ * space between child items containing a numeric <code>flex</code> configuration.</p>\r
+ * This layout may also be used to set the widths of child items by configuring it with the {@link #align} option.\r
  */\r
 Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
     <div id="cfg-Ext.layout.VBoxLayout-align"></div>/**\r
  */\r
 Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
     <div id="cfg-Ext.layout.VBoxLayout-align"></div>/**\r
@@ -158,8 +185,8 @@ Ext.layout.VBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
         \r
         var cs = this.getItems(ct), cm, ch, margin,\r
             size = this.getTargetSize(target),\r
         \r
         var cs = this.getItems(ct), cm, ch, margin,\r
             size = this.getTargetSize(target),\r
-            w = size.width - target.getPadding('lr') - this.scrollOffset,\r
-            h = size.height - target.getPadding('tb'),\r
+            w = size.width - target.getPadding('lr'),\r
+            h = size.height - target.getPadding('tb') - this.scrollOffset,\r
             l = this.padding.left, t = this.padding.top,\r
             isStart = this.pack == 'start',\r
             isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,\r
             l = this.padding.left, t = this.padding.top,\r
             isStart = this.pack == 'start',\r
             isRestore = ['stretch', 'stretchmax'].indexOf(this.align) == -1,\r
@@ -265,7 +292,9 @@ Ext.Container.LAYOUTS.vbox = Ext.layout.VBoxLayout;
 <div id="cls-Ext.layout.HBoxLayout"></div>/**\r
  * @class Ext.layout.HBoxLayout\r
  * @extends Ext.layout.BoxLayout\r
 <div id="cls-Ext.layout.HBoxLayout"></div>/**\r
  * @class Ext.layout.HBoxLayout\r
  * @extends Ext.layout.BoxLayout\r
- * A layout that arranges items horizontally\r
+ * <p>A layout that arranges items horizontally across a Container. This layout optionally divides available horizontal\r
+ * space between child items containing a numeric <code>flex</code> configuration.</p>\r
+ * This layout may also be used to set the heights of child items by configuring it with the {@link #align} option.\r
  */\r
 Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
     <div id="cfg-Ext.layout.HBoxLayout-align"></div>/**\r
  */\r
 Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {\r
     <div id="cfg-Ext.layout.HBoxLayout-align"></div>/**\r
@@ -416,6 +445,6 @@ Ext.layout.HBoxLayout = Ext.extend(Ext.layout.BoxLayout, {
 });\r
 \r
 Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;
 });\r
 \r
 Ext.Container.LAYOUTS.hbox = Ext.layout.HBoxLayout;
-</pre>    \r
-</body>\r
+</pre>
+</body>
 </html>
\ No newline at end of file
 </html>
\ No newline at end of file