add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / layout / component / Component.js

/**\r
 * This class is intended to be extended or created via the {@link Ext.Component#componentLayout layout}\r
 * configuration property.  See {@link Ext.Component#componentLayout} for additional details.\r
 * @private\r
 */\r
Ext.define('Ext.layout.component.Component', {\r
    extend: 'Ext.layout.Layout',\r
\r
    type: 'component',\r
\r
    isComponentLayout: true,\r
\r
    nullBox: {},\r
\r
    usesContentHeight: true,\r
    usesContentWidth: true,\r
    usesHeight: true,\r
    usesWidth: true,\r
\r
    widthCache: {},\r
    heightCache: {},\r
\r
    beginLayoutCycle: function (ownerContext, firstCycle) {\r
        var me = this,\r
            owner = me.owner,\r
            ownerCtContext = ownerContext.ownerCtContext,\r
            heightModel = ownerContext.heightModel,\r
            widthModel = ownerContext.widthModel,\r
            body = owner.el.dom === document.body,\r
            lastBox = owner.lastBox || me.nullBox,\r
            lastSize = owner.el.lastBox || me.nullBox,\r
            dirty = !body,\r
            isTopLevel = ownerContext.isTopLevel,\r
            ownerLayout, v, width, height;\r
\r
        me.callParent([ownerContext, firstCycle]);\r
\r
        if (firstCycle) {\r
            if (me.usesContentWidth) {\r
                ++ownerContext.consumersContentWidth;\r
            }\r
            if (me.usesContentHeight) {\r
                ++ownerContext.consumersContentHeight;\r
            }\r
            if (me.usesWidth) {\r
                ++ownerContext.consumersWidth;\r
            }\r
            if (me.usesHeight) {\r
                ++ownerContext.consumersHeight;\r
            }\r
\r
            if (ownerCtContext && !ownerCtContext.hasRawContent) {\r
                ownerLayout = owner.ownerLayout;\r
\r
                if (ownerLayout) {\r
                    if (ownerLayout.usesWidth) {\r
                        ++ownerContext.consumersWidth;\r
                    }\r
                    if (ownerLayout.usesHeight) {\r
                        ++ownerContext.consumersHeight;\r
                    }\r
                }\r
            }\r
        }\r
\r
        // we want to publish configured dimensions as early as possible and since this is\r
        // a write phase...\r
\r
        if (widthModel.configured) {\r
            // If the owner.el is the body, owner.width is not dirty (we don't want to write\r
            // it to the body el). For other el's, the width may already be correct in the\r
            // DOM (e.g., it is rendered in the markup initially). If the width is not\r
            // correct in the DOM, this is only going to be the case on the first cycle.\r
            width = owner[widthModel.names.width];\r
            if (isTopLevel && widthModel.calculatedFrom) {\r
                width = lastBox.width;\r
            }\r
\r
            if (!body) {\r
                dirty = me.setWidthInDom ||\r
                        (firstCycle ? width !== lastSize.width : widthModel.constrained);\r
            }\r
\r
            \r
            ownerContext.setWidth(width, dirty);\r
        } else if (isTopLevel) {\r
            if (widthModel.calculated) {\r
                v = lastBox.width;\r
                ownerContext.setWidth(v, /*dirty=*/v !== lastSize.width);\r
            }\r
\r
            v = lastBox.x;\r
            ownerContext.setProp('x', v, /*dirty=*/v !== lastSize.x);\r
        }\r
\r
        if (heightModel.configured) {\r
            height = owner[heightModel.names.height];\r
            if (isTopLevel && heightModel.calculatedFrom) {\r
                height = lastBox.height;\r
            }\r
\r
            if (!body) {\r
                dirty = firstCycle ? height !== lastSize.height\r
                                   : heightModel.constrained;\r
            }\r
\r
            ownerContext.setHeight(height, dirty);\r
        } else if (isTopLevel) {\r
            if (heightModel.calculated) {\r
                v = lastBox.height;\r
                ownerContext.setHeight(v, v !== lastSize.height);\r
            }\r
\r
            v = lastBox.y;\r
            ownerContext.setProp('y', v, /*dirty=*/v !== lastSize.y);\r
        }\r
    },\r
\r
    finishedLayout: function(ownerContext) {\r
        var me = this,\r
            elementChildren = ownerContext.children,\r
            owner = me.owner,\r
            len, i, elContext, lastBox, props;\r
\r
        // NOTE: In the code below we cannot use getProp because that will generate a layout dependency\r
\r
        // Set lastBox on managed child Elements.\r
        // So that ContextItem.constructor can snag the lastBox for use by its undo method.\r
        if (elementChildren) {\r
            len = elementChildren.length;\r
            for (i = 0; i < len; i++) {\r
                elContext = elementChildren[i];\r
                elContext.el.lastBox = elContext.props;\r
            }\r
        }\r
\r
        // Cache the size from which we are changing so that notifyOwner can notify the owningComponent with all essential information\r
        ownerContext.previousSize = me.lastComponentSize;\r
\r
        // Cache the currently layed out size\r
        me.lastComponentSize = owner.el.lastBox = props = ownerContext.props;\r
        \r
        // lastBox is a copy of the defined props to allow save/restore of these (panel\r
        // collapse needs this)\r
        lastBox = owner.lastBox || (owner.lastBox = {});\r
        lastBox.x = props.x;\r
        lastBox.y = props.y;\r
        lastBox.width = props.width;\r
        lastBox.height = props.height;\r
        lastBox.invalid = false;\r
        \r
        me.callParent([ownerContext]);\r
    },\r
    \r
    notifyOwner: function(ownerContext) {\r
        var me = this,\r
            currentSize = me.lastComponentSize,\r
            prevSize = ownerContext.previousSize;\r
\r
        me.owner.afterComponentLayout(currentSize.width, currentSize.height, \r
            prevSize ? prevSize.width : undefined, prevSize ? prevSize.height : undefined);\r
    },\r
\r
    /**\r
     * Returns the owner component's resize element.\r
     * @return {Ext.dom.Element}\r
     */\r
    getTarget : function() {\r
        return this.owner.el;\r
    },\r
\r
    /**\r
     * Returns the element into which rendering must take place. Defaults to the owner Component's encapsulating element.\r
     *\r
     * May be overridden in Component layout managers which implement an inner element.\r
     * @return {Ext.dom.Element}\r
     */\r
    getRenderTarget : function() {\r
        return this.owner.el;\r
    },\r
\r
    cacheTargetInfo: function(ownerContext) {\r
        var me = this,\r
            targetInfo = me.targetInfo,\r
            target;\r
\r
        if (!targetInfo) {\r
            target = ownerContext.getEl('getTarget', me);\r
\r
            me.targetInfo = targetInfo = {\r
                padding: target.getPaddingInfo(),\r
                border: target.getBorderInfo()\r
            };\r
        }\r
\r
        return targetInfo;\r
    },\r
\r
    measureAutoDimensions: function (ownerContext, dimensions) {\r
        // Subtle But Important:\r
        // \r
        // We don't want to call getProp/hasProp et.al. unless we in fact need that value\r
        // for our results! If we call it and don't need it, the layout manager will think\r
        // we depend on it and will schedule us again should it change.\r
\r
        var me = this,\r
            owner = me.owner,\r
            containerLayout = owner.layout,\r
            heightModel = ownerContext.heightModel,\r
            widthModel = ownerContext.widthModel,\r
            boxParent = ownerContext.boxParent,\r
            isBoxParent = ownerContext.isBoxParent,\r
            target = ownerContext.target,\r
            props = ownerContext.props,\r
            isContainer,\r
            ret = {\r
                gotWidth: false,\r
                gotHeight: false,\r
                isContainer: (isContainer = !ownerContext.hasRawContent)\r
            },\r
            hv = dimensions || 3,\r
            zeroWidth, zeroHeight,\r
            needed = 0,\r
            got = 0,\r
            ready, size, temp, key, cache;\r
\r
        // Note: this method is called *a lot*, so we have to be careful not to waste any\r
        // time or make useless calls or, especially, read the DOM when we can avoid it.\r
\r
        //---------------------------------------------------------------------\r
        // Width\r
\r
        if (widthModel.shrinkWrap && ownerContext.consumersContentWidth) {\r
            ++needed;\r
            zeroWidth = !(hv & 1); // jshint ignore:line\r
\r
            if (isContainer) {\r
                // as a componentLayout for a container, we rely on the container layout to\r
                // produce contentWidth...\r
                if (zeroWidth) {\r
                    ret.contentWidth = 0;\r
                    ret.gotWidth = true;\r
                    ++got;\r
                } else if ((ret.contentWidth = ownerContext.getProp('contentWidth')) !== undefined) {\r
                    ret.gotWidth = true;\r
                    ++got;\r
                }\r
            } else {\r
                size = props.contentWidth;\r
\r
                if (typeof size === 'number') { // if (already determined)\r
                    ret.contentWidth = size;\r
                    ret.gotWidth = true;\r
                    ++got;\r
                } else {\r
                    if (zeroWidth) {\r
                        ready = true;\r
                    } else if (!ownerContext.hasDomProp('containerChildrenSizeDone')) {\r
                        ready = false;\r
                    } else if (isBoxParent || !boxParent || boxParent.widthModel.shrinkWrap) {\r
                        // if we have no boxParent, we are ready, but a shrinkWrap boxParent\r
                        // artificially provides width early in the measurement process so\r
                        // we are ready to go in that case as well...\r
                        ready = true;\r
                    } else {\r
                        // lastly, we have a boxParent that will be given a width, so we\r
                        // can wait for that width to be set in order to properly measure\r
                        // whatever is inside...\r
                        ready = boxParent.hasDomProp('width');\r
                    }\r
\r
                    if (ready) {\r
                        if (zeroWidth) {\r
                            temp = 0;\r
                        } else if (containerLayout && containerLayout.measureContentWidth) {\r
                            // Allow the container layout to do the measurement since it\r
                            // may have a better idea of how to do it even with no items:\r
                            temp = containerLayout.measureContentWidth(ownerContext);\r
                        } else {\r
                            if (target.cacheWidth) {\r
                                // if all instances of a given xtype/UI are the same size, only read the DOM once\r
                                // to measure the first instance.  Thereafter, retrieve the width from the cache.\r
                                key = target.xtype + '-' + target.ui;\r
                                cache = me.widthCache;\r
                                temp = cache[key] || (cache[key] = me.measureContentWidth(ownerContext));\r
                            } else {\r
                                temp = me.measureContentWidth(ownerContext);\r
                            }\r
                        }\r
\r
                        if (!isNaN(ret.contentWidth = temp)) {\r
                            ownerContext.setContentWidth(temp, true);\r
                            ret.gotWidth = true;\r
                            ++got;\r
                        }\r
                    }\r
                }\r
            }\r
        } else if (widthModel.natural && ownerContext.consumersWidth) {\r
            ++needed;\r
            size = props.width;\r
            // zeroWidth does not apply\r
\r
            if (typeof size === 'number') { // if (already determined)\r
                ret.width = size;\r
                ret.gotWidth = true;\r
                ++got;\r
            } else {\r
                if (isBoxParent || !boxParent) {\r
                    ready = true;\r
                } else {\r
                    // lastly, we have a boxParent that will be given a width, so we\r
                    // can wait for that width to be set in order to properly measure\r
                    // whatever is inside...\r
                    ready = boxParent.hasDomProp('width');\r
                }\r
\r
                if (ready) {\r
                    if (!isNaN(ret.width = me.measureOwnerWidth(ownerContext))) {\r
                        ownerContext.setWidth(ret.width, false);\r
                        ret.gotWidth = true;\r
                        ++got;\r
                    }\r
                }\r
            }\r
        }\r
\r
        //---------------------------------------------------------------------\r
        // Height\r
\r
        if (heightModel.shrinkWrap && ownerContext.consumersContentHeight) {\r
            ++needed;\r
            zeroHeight = !(hv & 2); // jshint ignore:line\r
\r
            if (isContainer) {\r
                // don't ask unless we need to know...\r
                if (zeroHeight) {\r
                    ret.contentHeight = 0;\r
                    ret.gotHeight = true;\r
                    ++got;\r
                } else if ((ret.contentHeight = ownerContext.getProp('contentHeight')) !== undefined) {\r
                    ret.gotHeight = true;\r
                    ++got;\r
                }\r
            } else {\r
                size = props.contentHeight;\r
\r
                if (typeof size === 'number') { // if (already determined)\r
                    ret.contentHeight = size;\r
                    ret.gotHeight = true;\r
                    ++got;\r
                } else {\r
                    if (zeroHeight) {\r
                        ready = true;\r
                    } else if (!ownerContext.hasDomProp('containerChildrenSizeDone')) {\r
                        ready = false;\r
                    } else if (owner.noWrap) {\r
                        ready = true;\r
                    } else if (!widthModel.shrinkWrap) {\r
                        // fixed width, so we need the width to determine the height...\r
                        ready = (ownerContext.bodyContext || ownerContext).hasDomProp('width');// && (!ownerContext.bodyContext || ownerContext.bodyContext.hasDomProp('width'));\r
                    } else if (isBoxParent || !boxParent || boxParent.widthModel.shrinkWrap) {\r
                        // if we have no boxParent, we are ready, but an autoWidth boxParent\r
                        // artificially provides width early in the measurement process so\r
                        // we are ready to go in that case as well...\r
                        ready = true;\r
                    } else {\r
                        // lastly, we have a boxParent that will be given a width, so we\r
                        // can wait for that width to be set in order to properly measure\r
                        // whatever is inside...\r
                        ready = boxParent.hasDomProp('width');\r
                    }\r
\r
                    if (ready) {\r
                        if (zeroHeight) {\r
                            temp = 0;\r
                        } else if (containerLayout && containerLayout.measureContentHeight) {\r
                            // Allow the container layout to do the measurement since it\r
                            // may have a better idea of how to do it even with no items:\r
                            temp = containerLayout.measureContentHeight(ownerContext);\r
                        } else {\r
                           if (target.cacheHeight) {\r
                                // if all instances of a given xtype/UI are the same size, only read the DOM once\r
                                // to measure the first instance.  Thereafter, retrieve the height from the cache.\r
                                key = target.xtype + '-' + target.ui;\r
                                cache = me.heightCache;\r
                                temp = cache[key] || (cache[key] = me.measureContentHeight(ownerContext));\r
                            } else {\r
                                temp = me.measureContentHeight(ownerContext);\r
                            }\r
                        }\r
\r
                        if (!isNaN(ret.contentHeight = temp)) {\r
                            ownerContext.setContentHeight(temp, true);\r
                            ret.gotHeight = true;\r
                            ++got;\r
                        }\r
                    }\r
                }\r
            }\r
        } else if (heightModel.natural && ownerContext.consumersHeight) {\r
            ++needed;\r
            size = props.height;\r
            // zeroHeight does not apply\r
\r
            if (typeof size === 'number') { // if (already determined)\r
                ret.height = size;\r
                ret.gotHeight = true;\r
                ++got;\r
            } else {\r
                if (isBoxParent || !boxParent) {\r
                    ready = true;\r
                } else {\r
                    // lastly, we have a boxParent that will be given a width, so we\r
                    // can wait for that width to be set in order to properly measure\r
                    // whatever is inside...\r
                    ready = boxParent.hasDomProp('width');\r
                }\r
\r
                if (ready) {\r
                    if (!isNaN(ret.height = me.measureOwnerHeight(ownerContext))) {\r
                        ownerContext.setHeight(ret.height, false);\r
                        ret.gotHeight = true;\r
                        ++got;\r
                    }\r
                }\r
            }\r
        }\r
\r
        if (boxParent) {\r
            ownerContext.onBoxMeasured();\r
        }\r
\r
        ret.gotAll = got === needed;\r
        // see if we can avoid calling this method by storing something on ownerContext.\r
        return ret;\r
    },\r
\r
    measureContentWidth: function (ownerContext) {\r
        // contentWidth includes padding, but not border, framing or margins\r
        return ownerContext.el.getWidth() - ownerContext.getFrameInfo().width;\r
    },\r
\r
    measureContentHeight: function (ownerContext) {\r
        // contentHeight includes padding, but not border, framing or margins\r
        return ownerContext.el.getHeight() - ownerContext.getFrameInfo().height;\r
    },\r
\r
    measureOwnerHeight: function (ownerContext) {\r
        return ownerContext.el.getHeight();\r
    },\r
\r
    measureOwnerWidth: function (ownerContext) {\r
        return ownerContext.el.getWidth();\r
    }\r
});\r