X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/6746dc89c47ed01b165cc1152533605f97eb8e8d..f562e4c6e5fac7bcb445985b99acbea4d706e6f0:/src/layout/container/Fit.js diff --git a/src/layout/container/Fit.js b/src/layout/container/Fit.js index 2b5fec9c..1bb289da 100644 --- 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 - *
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.
- *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:
- *
- 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()
- });
-
+ * 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
+ * If the individual contained items do not have a margins + * property specified or margin specified via CSS, the default margins from this property will be + * applied to each item.
+ *This property may be specified as an object containing margins + * to apply in the format:
+{
+ top: (top margin),
+ right: (right margin),
+ bottom: (bottom margin),
+ left: (left margin)
+}
+ * 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:
+ *Defaults to:
+ * {top:0, right:0, bottom:0, left:0}
+ *
+ */
+ 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;
});