X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/3789b528d8dd8aad4558e38e22d775bcab1cbd36..refs/heads/master:/docs/source/Fit.html diff --git a/docs/source/Fit.html b/docs/source/Fit.html index 6206c310..ea735870 100644 --- a/docs/source/Fit.html +++ b/docs/source/Fit.html @@ -3,8 +3,8 @@ The source code - - + + @@ -16,31 +16,28 @@
/**
- * @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', {
 
@@ -49,16 +46,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);
+            }
         }
     },
 
@@ -69,15 +117,29 @@ Ext.define('Ext.layout.container.Fit', {
     setItemBox : function(item, box) {
         var me = this;
         if (item && box.height > 0) {
-            if (me.isManaged('width') === true) {
+            if (!me.owner.isFixedWidth()) {
                box.width = undefined;
             }
-            if (me.isManaged('height') === true) {
+            if (!me.owner.isFixedHeight()) {
                box.height = undefined;
             }
             me.setItemSize(item, box.width, box.height);
         }
+    },
+
+    configureItem: function(item) {
+
+        // Card layout only controls dimensions which IT has controlled.
+        // That calculation has to be determined at run time by examining the ownerCt's isFixedWidth()/isFixedHeight() methods
+        item.layoutManagedHeight = 0;
+        item.layoutManagedWidth = 0;
+
+        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;
 });