/**
- * @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);
+ }
}
},
@@ -88,6 +136,10 @@ 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;
});