add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / layout / container / Absolute.js

/**\r
 * This is a layout that inherits the anchoring of {@link Ext.layout.container.Anchor} and adds the\r
 * ability for x/y positioning using the standard x and y component config options.\r
 *\r
 * This class is intended to be extended or created via the {@link Ext.container.Container#layout layout}\r
 * configuration property.  See {@link Ext.container.Container#layout} for additional details.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.form.Panel', {\r
 *         title: 'Absolute Layout',\r
 *         width: 300,\r
 *         height: 275,\r
 *         layout: {\r
 *             type: 'absolute'\r
 *             // layout-specific configs go here\r
 *             //itemCls: 'x-abs-layout-item',\r
 *         },\r
 *         url:'save-form.php',\r
 *         defaultType: 'textfield',\r
 *         items: [{\r
 *             x: 10,\r
 *             y: 10,\r
 *             xtype:'label',\r
 *             text: 'Send To:'\r
 *         },{\r
 *             x: 80,\r
 *             y: 10,\r
 *             name: 'to',\r
 *             anchor:'90%'  // anchor width by percentage\r
 *         },{\r
 *             x: 10,\r
 *             y: 40,\r
 *             xtype:'label',\r
 *             text: 'Subject:'\r
 *         },{\r
 *             x: 80,\r
 *             y: 40,\r
 *             name: 'subject',\r
 *             anchor: '90%'  // anchor width by percentage\r
 *         },{\r
 *             x:0,\r
 *             y: 80,\r
 *             xtype: 'textareafield',\r
 *             name: 'msg',\r
 *             anchor: '100% 100%'  // anchor width and height\r
 *         }],\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 */\r
Ext.define('Ext.layout.container.Absolute', {\r
\r
    /* Begin Definitions */\r
\r
    alias: 'layout.absolute',\r
    extend: 'Ext.layout.container.Anchor',\r
    alternateClassName: 'Ext.layout.AbsoluteLayout',\r
\r
    /* End Definitions */\r
\r
    targetCls: Ext.baseCSSPrefix + 'abs-layout-ct',\r
    itemCls: Ext.baseCSSPrefix + 'abs-layout-item',\r
\r
    /**\r
     * @cfg {Boolean} ignoreOnContentChange\r
     * True indicates that changes to one item in this layout do not effect the layout in\r
     * general. This may need to be set to false if the component is\r
     * {@link Ext.Component#scrollable scrollable}.\r
     */\r
    ignoreOnContentChange: true,\r
\r
    type: 'absolute',\r
\r
    /**\r
     * @private\r
     */\r
    adjustWidthAnchor: function(value, childContext) {\r
        var padding = this.targetPadding,\r
            x = childContext.getStyle('left');\r
\r
        return value - x + padding.left;\r
    },\r
\r
    /**\r
     * @private\r
     */\r
    adjustHeightAnchor: function(value, childContext) {\r
        var padding = this.targetPadding,\r
            y = childContext.getStyle('top');\r
\r
        return value - y + padding.top;\r
    },\r
\r
    isItemLayoutRoot: function (item) {\r
        return this.ignoreOnContentChange || this.callParent(arguments);\r
    },\r
\r
    isItemShrinkWrap: function (item) {\r
        return true;\r
    },\r
\r
    beginLayout: function (ownerContext) {\r
        var me = this,\r
            target = me.getTarget();\r
\r
        me.callParent(arguments);\r
\r
        // Do not set position: relative; when the absolute layout target is the body\r
        if (target.dom !== document.body) {\r
            target.position();\r
        }\r
\r
        me.targetPadding = ownerContext.targetContext.getPaddingInfo();\r
    },\r
\r
    isItemBoxParent: function (itemContext) {\r
        return true;\r
    },\r
\r
    onContentChange: function () {\r
        if (this.ignoreOnContentChange) {\r
            return false;\r
        }\r
        return this.callParent(arguments);\r
    },\r
\r
    calculateContentSize: function (ownerContext, dimensions) {\r
        var me = this,\r
            containerDimensions = (dimensions || 0) | // jshint ignore:line\r
                   ((ownerContext.widthModel.shrinkWrap ? 1 : 0) | // jshint ignore:line\r
                    (ownerContext.heightModel.shrinkWrap ? 2 : 0)),\r
            calcWidth = (containerDimensions & 1) || undefined,// jshint ignore:line\r
            calcHeight = (containerDimensions & 2) || undefined,// jshint ignore:line\r
            childItems = ownerContext.childItems,\r
            length = childItems.length,\r
            contentHeight = 0,\r
            contentWidth = 0,\r
            needed = 0,\r
            props = ownerContext.props,\r
            targetPadding, child, childContext, height, i, margins, width;\r
\r
        if (calcWidth) {\r
            if (isNaN(props.contentWidth)) {\r
                ++needed;\r
            } else {\r
                calcWidth = undefined;\r
            }\r
        }\r
        if (calcHeight) {\r
            if (isNaN(props.contentHeight)) {\r
                ++needed;\r
            } else {\r
                calcHeight = undefined;\r
            }\r
        }\r
\r
        if (needed) {\r
            for (i = 0; i < length; ++i) {\r
                childContext = childItems[i];\r
                child = childContext.target;\r
                height = calcHeight && childContext.getProp('height');\r
                width = calcWidth && childContext.getProp('width');\r
                margins = childContext.getMarginInfo();\r
\r
                height += margins.bottom;\r
                width  += margins.right;\r
\r
                contentHeight = Math.max(contentHeight, (child.y || 0) + height);\r
                contentWidth = Math.max(contentWidth, (child.x || 0) + width);\r
\r
                if (isNaN(contentHeight) && isNaN(contentWidth)) {\r
                    me.done = false;\r
                    return;\r
                }\r
            }\r
\r
            if (calcWidth || calcHeight) {\r
                targetPadding = ownerContext.targetContext.getPaddingInfo();\r
            }\r
            if (calcWidth && !ownerContext.setContentWidth(contentWidth + targetPadding.width)) {\r
                me.done = false;\r
            }\r
            if (calcHeight && !ownerContext.setContentHeight(contentHeight + targetPadding.height)) {\r
                me.done = false;\r
            }\r
\r
            /* add a '/' to turn on this log ('//* enables, '/*' disables)\r
            if (me.done) {\r
                var el = ownerContext.targetContext.el.dom;\r
                Ext.log(this.owner.id, '.contentSize: ', contentWidth, 'x', contentHeight,\r
                    ' => scrollSize: ', el.scrollWidth, 'x', el.scrollHeight);\r
            }/**/\r
        }\r
    }\r
});\r