Upgrade to ExtJS 4.0.7 - Released 10/19/2011

[extjs.git] / src / layout / container / Fit.js

diff --git a/src/layout/container/Fit.js b/src/layout/container/Fit.js
index 2b5fec9..1bb289d 100644 (file)
--- a/src/layout/container/Fit.js
+++ b/src/layout/container/Fit.js
@@ -13,31 +13,28 @@ If you are unsure which license is appropriate for your use, please contact the
 
 */
 /**
- * @class Ext.layout.container.Fit
- * @extends Ext.layout.container.AbstractFit
- * <p>This is a base class for layouts that contain <b>a single item</b> that automatically expands to fill the layout's
- * container.  This class is intended to be extended or created via the <tt>layout:'fit'</tt> {@link Ext.container.Container#layout}
- * config, and should generally not need to be created directly via the new keyword.</p>
- * <p>FitLayout does not have any direct config options (other than inherited ones).  To fit a panel to a container
- * using FitLayout, simply set layout:'fit' on the container and add a single panel to it.  If the container has
- * multiple panels, only the first one will be displayed.  
- * {@img Ext.layout.container.Fit/Ext.layout.container.Fit.png Ext.layout.container.Fit container layout}
- * Example usage:</p>
- * <pre><code>
-    Ext.create('Ext.panel.Panel', {
-        title: 'Fit Layout',
-        width: 300,
-        height: 150,
-        layout:'fit',
-        items: {
-            title: 'Inner Panel',
-            html: 'This is the inner panel content',
-            bodyPadding: 20,
-            border: false
-        },
-        renderTo: Ext.getBody()
-    });  
-</code></pre>
+ * This is a base class for layouts that contain **a single item** that automatically expands to fill the layout's
+ * container. This class is intended to be extended or created via the `layout: 'fit'`
+ * {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.
+ *
+ * Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using
+ * Fit layout, simply set `layout: 'fit'` on the container and add a single panel to it. If the container has multiple
+ * panels, only the first one will be displayed.
+ *
+ *     @example
+ *     Ext.create('Ext.panel.Panel', {
+ *         title: 'Fit Layout',
+ *         width: 300,
+ *         height: 150,
+ *         layout:'fit',
+ *         items: {
+ *             title: 'Inner Panel',
+ *             html: 'This is the inner panel content',
+ *             bodyPadding: 20,
+ *             border: false
+ *         },
+ *         renderTo: Ext.getBody()
+ *     });
  */
 Ext.define('Ext.layout.container.Fit', {
 
@@ -46,16 +43,67 @@ Ext.define('Ext.layout.container.Fit', {
     extend: 'Ext.layout.container.AbstractFit',
     alias: 'layout.fit',
     alternateClassName: 'Ext.layout.FitLayout',
+    requires: ['Ext.layout.container.Box'],
 
     /* End Definitions */
-   
+
+    /**
+     * @cfg {Object} defaultMargins
+     * <p>If the individual contained items do not have a <tt>margins</tt>
+     * property specified or margin specified via CSS, the default margins from this property will be
+     * applied to each item.</p>
+     * <br><p>This property may be specified as an object containing margins
+     * to apply in the format:</p><pre><code>
+{
+    top: (top margin),
+    right: (right margin),
+    bottom: (bottom margin),
+    left: (left margin)
+}</code></pre>
+     * <p>This property may also be specified as a string containing
+     * space-separated, numeric margin values. The order of the sides associated
+     * with each value matches the way CSS processes margin values:</p>
+     * <div class="mdetail-params"><ul>
+     * <li>If there is only one value, it applies to all sides.</li>
+     * <li>If there are two values, the top and bottom borders are set to the
+     * first value and the right and left are set to the second.</li>
+     * <li>If there are three values, the top is set to the first value, the left
+     * and right are set to the second, and the bottom is set to the third.</li>
+     * <li>If there are four values, they apply to the top, right, bottom, and
+     * left, respectively.</li>
+     * </ul></div>
+     * <p>Defaults to:</p><pre><code>
+     * {top:0, right:0, bottom:0, left:0}
+     * </code></pre>
+     */
+    defaultMargins: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+    },
+
     // @private
     onLayout : function() {
-        var me = this;
+        var me = this,
+            size,
+            item,
+            margins;
         me.callParent();
 
         if (me.owner.items.length) {
-            me.setItemBox(me.owner.items.get(0), me.getLayoutTargetSize());
+            item = me.owner.items.get(0);
+            margins = item.margins || me.defaultMargins;
+            size = me.getLayoutTargetSize();
+            size.width  -= margins.width;
+            size.height -= margins.height;
+            me.setItemBox(item, size);
+
+            // If any margins were configure either through the margins config, or in the CSS style,
+            // Then positioning will be used.
+            if (margins.left || margins.top) {
+                item.setPosition(margins.left, margins.top);
+            }
         }
     },
 
@@ -85,4 +133,8 @@ Ext.define('Ext.layout.container.Fit', {
 
         this.callParent(arguments);
     }
+}, function() {
+    // Use Box layout's renderItem which reads CSS margins, and adds them to any configured item margins
+    // (Defaulting to "0 0 0 0")
+    this.prototype.renderItem = Ext.layout.container.Box.prototype.renderItem;
 });