add extjs 6.0.1 sources

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

/**\r
 * This is a base class for layouts that contain a single item that automatically expands to fill the layout's\r
 * container. This class is intended to be extended or created via the layout:'fit'\r
 * {@link Ext.container.Container#layout} config, and should generally not need to be created directly via the new keyword.\r
 *\r
 * Fit layout does not have any direct config options (other than inherited ones). To fit a panel to a container using\r
 * Fit layout, simply set `layout: 'fit'` on the container and add a single panel to it.\r
 *\r
 *     @example\r
 *     Ext.create('Ext.panel.Panel', {\r
 *         title: 'Fit Layout',\r
 *         width: 300,\r
 *         height: 150,\r
 *         layout:'fit',\r
 *         items: {\r
 *             title: 'Inner Panel',\r
 *             html: 'This is the inner panel content',\r
 *             bodyPadding: 20,\r
 *             border: false\r
 *         },\r
 *         renderTo: Ext.getBody()\r
 *     });\r
 *\r
 * If the container has multiple items, all of the items will all be equally sized. This is usually not\r
 * desired, so to avoid this, place only a **single** item in the container. This sizing of all items\r
 * can be used to provide a background {@link Ext.Img image} that is "behind" another item\r
 * such as a {@link Ext.view.View dataview} if you also absolutely position the items.\r
 */\r
Ext.define('Ext.layout.container.Fit', {\r
\r
    /* Begin Definitions */\r
    extend: 'Ext.layout.container.Container',\r
    alternateClassName: 'Ext.layout.FitLayout',\r
\r
    alias: 'layout.fit',\r
\r
    /* End Definitions */\r
\r
    /**\r
     * @inheritdoc Ext.layout.container.Container#cfg-itemCls\r
     */\r
    itemCls: Ext.baseCSSPrefix + 'fit-item',\r
    type: 'fit',\r
   \r
    manageMargins: true,\r
\r
    sizePolicies: {\r
        0: { readsWidth: 1, readsHeight: 1, setsWidth: 0, setsHeight: 0 },\r
        1: { readsWidth: 0, readsHeight: 1, setsWidth: 1, setsHeight: 0 },\r
        2: { readsWidth: 1, readsHeight: 0, setsWidth: 0, setsHeight: 1 },\r
        3: { readsWidth: 0, readsHeight: 0, setsWidth: 1, setsHeight: 1 }\r
    },\r
\r
    getItemSizePolicy: function (item, ownerSizeModel) {\r
        // this layout's sizePolicy is derived from its owner's sizeModel:\r
        var sizeModel = ownerSizeModel || this.owner.getSizeModel(),\r
            mode = (sizeModel.width.shrinkWrap ? 0 : 1) | // jshint ignore:line\r
                   (sizeModel.height.shrinkWrap ? 0 : 2);\r
\r
       return this.sizePolicies[mode];\r
    },\r
\r
    beginLayoutCycle: function (ownerContext, firstCycle) {\r
        var me = this,\r
            // determine these before the lastSizeModels get updated:\r
            resetHeight = me.lastHeightModel && me.lastHeightModel.calculated,\r
            resetWidth = me.lastWidthModel && me.lastWidthModel.calculated,\r
            resetSizes = resetWidth || resetHeight,\r
            maxChildMinHeight = 0, maxChildMinWidth = 0,\r
            c, childItems, i, item, length, margins, minHeight, minWidth, style, undef;\r
\r
        me.callParent(arguments);\r
\r
        // Clear any dimensions which we set before calculation, in case the current\r
        // settings affect the available size. This particularly effects self-sizing\r
        // containers such as fields, in which the target element is naturally sized,\r
        // and should not be stretched by a sized child item.\r
        if (resetSizes && ownerContext.targetContext.el.dom.tagName.toUpperCase() !== 'TD') {\r
            resetSizes = resetWidth = resetHeight = false;\r
        }\r
\r
        childItems = ownerContext.childItems;\r
        length = childItems.length;\r
\r
        for (i = 0; i < length; ++i) {\r
            item = childItems[i];\r
\r
            // On the firstCycle, we determine the max of the minWidth/Height of the items\r
            // since these can cause the container to grow scrollbars despite our attempts\r
            // to fit the child to the container.\r
            if (firstCycle) {\r
                c = item.target;\r
                minHeight = c.minHeight;\r
                minWidth = c.minWidth;\r
\r
                if (minWidth || minHeight) {\r
                    margins = item.marginInfo || item.getMarginInfo();\r
                    // if the child item has undefined minWidth/Height, these will become\r
                    // NaN by adding the margins...\r
                    minHeight += margins.height;\r
                    minWidth += margins.height;\r
\r
                    // if the child item has undefined minWidth/Height, these comparisons\r
                    // will evaluate to false... that is, "0 < NaN" == false...\r
                    if (maxChildMinHeight < minHeight) {\r
                        maxChildMinHeight = minHeight;\r
                    }\r
                    if (maxChildMinWidth < minWidth) {\r
                        maxChildMinWidth = minWidth;\r
                    }\r
                }\r
            }\r
\r
            if (resetSizes) {\r
                style = item.el.dom.style;\r
\r
                if (resetHeight) {\r
                    style.height = '';\r
                }\r
                if (resetWidth) {\r
                    style.width = '';\r
                }\r
            }\r
        }\r
\r
        if (firstCycle) {\r
            ownerContext.maxChildMinHeight = maxChildMinHeight;\r
            ownerContext.maxChildMinWidth = maxChildMinWidth;\r
        }\r
\r
        // Cache the overflowX/Y flags, but make them false in shrinkWrap mode (since we\r
        // won't be triggering overflow in that case) and false if we have no minSize (so\r
        // no child to trigger an overflow).\r
        c = ownerContext.target;\r
        ownerContext.overflowX = (!ownerContext.widthModel.shrinkWrap && \r
                                   ownerContext.maxChildMinWidth &&\r
                                   c.scrollFlags.x) || undef;\r
\r
        ownerContext.overflowY = (!ownerContext.heightModel.shrinkWrap &&\r
                                   ownerContext.maxChildMinHeight &&\r
                                   c.scrollFlags.y) || undef;\r
    },\r
\r
    calculate: function (ownerContext) {\r
        var me = this,\r
            childItems = ownerContext.childItems,\r
            length = childItems.length,\r
            containerSize = me.getContainerSize(ownerContext),\r
            info = {\r
                length: length,\r
                ownerContext: ownerContext,\r
                targetSize: containerSize\r
            },\r
            shrinkWrapWidth = ownerContext.widthModel.shrinkWrap,\r
            shrinkWrapHeight = ownerContext.heightModel.shrinkWrap,\r
            overflowX = ownerContext.overflowX,\r
            overflowY = ownerContext.overflowY,\r
            scrollbars, scrollbarSize, padding, i, contentWidth, contentHeight;\r
\r
        ownerContext.state.info = info;\r
        if (overflowX || overflowY) {\r
            // If we have children that have minHeight/Width, we may be forced to overflow\r
            // and gain scrollbars. If so, we want to remove their space from the other\r
            // axis so that we fit things inside the scrollbars rather than under them.\r
            scrollbars = me.getScrollbarsNeeded(\r
                    overflowX && containerSize.width, overflowY && containerSize.height,\r
                    ownerContext.maxChildMinWidth, ownerContext.maxChildMinHeight);\r
\r
            if (scrollbars) {\r
                scrollbarSize = Ext.getScrollbarSize();\r
                if (scrollbars & 1) { // jshint ignore:line\r
                    // if we need the hscrollbar, remove its height\r
                    containerSize.height -= scrollbarSize.height;\r
                }\r
                if (scrollbars & 2) { // jshint ignore:line\r
                    // if we need the vscrollbar, remove its width\r
                    containerSize.width -= scrollbarSize.width;\r
                }\r
            }\r
        }\r
\r
        // If length === 0, it means we either have no child items, or the children are hidden\r
        if (length > 0) {\r
            // Size the child items to the container (if non-shrinkWrap):\r
            for (i = 0; i < length; ++i) {\r
                info.index = i;\r
                me.fitItem(childItems[i], info);\r
            }\r
        } else {\r
            info.contentWidth = info.contentHeight = 0;\r
        }\r
\r
        if (shrinkWrapHeight || shrinkWrapWidth) {\r
            padding = ownerContext.targetContext.getPaddingInfo();\r
            \r
            if (shrinkWrapWidth) {\r
                if (overflowY && !containerSize.gotHeight) {\r
                    // if we might overflow vertically and don't have the container height,\r
                    // we don't know if we will need a vscrollbar or not, so we must wait\r
                    // for that height so that we can determine the contentWidth...\r
                    me.done = false;\r
                } else {\r
                    contentWidth = info.contentWidth + padding.width;\r
                    // the scrollbar flag (if set) will indicate that an overflow exists on\r
                    // the horz(1) or vert(2) axis... if not set, then there could never be\r
                    // an overflow...\r
                    if (scrollbars & 2) { // jshint ignore:line\r
                        // if we need the vscrollbar, add its width\r
                        contentWidth += scrollbarSize.width;\r
                    }\r
                    if (!ownerContext.setContentWidth(contentWidth)) {\r
                        me.done = false;\r
                    }\r
                }\r
            }\r
\r
            if (shrinkWrapHeight) {\r
                if (overflowX && !containerSize.gotWidth) {\r
                    // if we might overflow horizontally and don't have the container width,\r
                    // we don't know if we will need a hscrollbar or not, so we must wait\r
                    // for that width so that we can determine the contentHeight...\r
                    me.done = false;\r
                } else {\r
                    contentHeight = info.contentHeight + padding.height;\r
                    // the scrollbar flag (if set) will indicate that an overflow exists on\r
                    // the horz(1) or vert(2) axis... if not set, then there could never be\r
                    // an overflow...\r
                    if (scrollbars & 1) { // jshint ignore:line\r
                        // if we need the hscrollbar, add its height\r
                        contentHeight += scrollbarSize.height;\r
                    }\r
                    if (!ownerContext.setContentHeight(contentHeight)) {\r
                        me.done = false;\r
                    }\r
                }\r
            }\r
        }\r
    },\r
\r
    fitItem: function (itemContext, info) {\r
        var me = this;\r
\r
        if (itemContext.invalid) {\r
            me.done = false;\r
            return;\r
        }\r
\r
        info.margins = itemContext.getMarginInfo();\r
        info.needed = info.got = 0;\r
\r
        me.fitItemWidth(itemContext, info);\r
        me.fitItemHeight(itemContext, info);\r
\r
        // If not all required dimensions have been satisfied, we're not done.\r
        if (info.got !== info.needed) {\r
            me.done = false;\r
        }\r
    },\r
\r
    fitItemWidth: function (itemContext, info) {\r
        var contentWidth, width;\r
        // Attempt to set only dimensions that are being controlled, not shrinkWrap dimensions\r
        if (info.ownerContext.widthModel.shrinkWrap) {\r
            // contentWidth must include the margins to be consistent with setItemWidth\r
            width = itemContext.getProp('width') + info.margins.width;\r
            // because we add margins, width will be NaN or a number (not undefined)\r
\r
            contentWidth = info.contentWidth;\r
            if (contentWidth === undefined) {\r
                info.contentWidth = width;\r
            } else {\r
                info.contentWidth = Math.max(contentWidth, width);\r
            }\r
        } else if (itemContext.widthModel.calculated) {\r
            ++info.needed;\r
            if (info.targetSize.gotWidth) {\r
                ++info.got;\r
                this.setItemWidth(itemContext, info);\r
            } else {\r
                // Too early to position\r
                return;\r
            }\r
        }\r
\r
        this.positionItemX(itemContext, info);\r
    },\r
\r
    fitItemHeight: function (itemContext, info) {\r
        var contentHeight, height;\r
        if (info.ownerContext.heightModel.shrinkWrap) {\r
            // contentHeight must include the margins to be consistent with setItemHeight\r
            height = itemContext.getProp('height') + info.margins.height;\r
            // because we add margins, height will be NaN or a number (not undefined)\r
\r
            contentHeight = info.contentHeight;\r
            if (contentHeight === undefined) {\r
                info.contentHeight = height;\r
            } else {\r
                info.contentHeight = Math.max(contentHeight, height);\r
            }\r
        } else if (itemContext.heightModel.calculated) {\r
            ++info.needed;\r
            if (info.targetSize.gotHeight) {\r
                ++info.got;\r
                this.setItemHeight(itemContext, info);\r
            } else {\r
                // Too early to position\r
                return;\r
            }\r
        }\r
\r
        this.positionItemY(itemContext, info);\r
    },\r
\r
    positionItemX: function (itemContext, info) {\r
        var margins = info.margins;\r
\r
        // Adjust position to account for configured margins or if we have multiple items\r
        // (all items should overlap):\r
        if (info.index || margins.left) {\r
            itemContext.setProp('x', margins.left);\r
        }\r
\r
        if (margins.width && info.ownerContext.widthModel.shrinkWrap) {\r
            // Need the margins for shrink-wrapping but old IE sometimes collapses the left margin into the padding\r
            itemContext.setProp('margin-right', margins.width);\r
        }\r
    },\r
\r
    positionItemY: function (itemContext, info) {\r
        var margins = info.margins;\r
\r
        if (info.index || margins.top) {\r
            itemContext.setProp('y', margins.top);\r
        }\r
\r
        if (margins.height && info.ownerContext.heightModel.shrinkWrap) {\r
            // Need the margins for shrink-wrapping but old IE sometimes collapses the top margin into the padding\r
            itemContext.setProp('margin-bottom', margins.height);\r
        }\r
    },\r
\r
    setItemHeight: function (itemContext, info) {\r
        itemContext.setHeight(info.targetSize.height - info.margins.height);\r
    },\r
\r
    setItemWidth: function (itemContext, info) {\r
        itemContext.setWidth(info.targetSize.width - info.margins.width);\r
    }\r
});\r