add extjs 6.0.1 sources

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

/**\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
Ext.define('Ext.layout.container.Container', {\r
    extend: 'Ext.layout.Layout',\r
\r
    alias: 'layout.container',\r
\r
    alternateClassName: 'Ext.layout.ContainerLayout',\r
\r
    mixins: [\r
        'Ext.util.ElementContainer'\r
    ],\r
\r
    requires: [\r
        'Ext.XTemplate'\r
    ],\r
\r
    type: 'container',\r
\r
    /* End Definitions */\r
\r
    /**\r
     * @cfg {String} itemCls\r
     * An optional extra CSS class that will be added to the container. This can be useful for\r
     * adding customized styles to the container or any of its children using standard CSS\r
     * rules. See {@link Ext.Component}.{@link Ext.Component#componentCls componentCls} also.\r
     */\r
\r
    /**\r
     * @private\r
     * Called by an owning Panel before the Panel begins its collapse process.\r
     * Most layouts will not need to override the default Ext.emptyFn implementation.\r
     */\r
    beginCollapse: Ext.emptyFn,\r
\r
    /**\r
     * @private\r
     * Called by an owning Panel before the Panel begins its expand process.\r
     * Most layouts will not need to override the default Ext.emptyFn implementation.\r
     */\r
    beginExpand: Ext.emptyFn,\r
\r
    /**\r
     * An object which contains boolean properties specifying which properties are to be\r
     * animated upon flush of child Component ContextItems. For example, Accordion would\r
     * have:\r
     *\r
     *      {\r
     *          y: true,\r
     *          height: true\r
     *      }\r
     *\r
     * @private\r
     */\r
    animatePolicy: null,\r
\r
    /**\r
     * @private\r
     * tracks the number of child items that do not use "liquid" CSS layout\r
     */\r
    activeItemCount: 0,\r
\r
    renderTpl: [\r
        '{%this.renderBody(out,values)%}'\r
    ],\r
\r
    usesContainerHeight: true,\r
    usesContainerWidth: true,\r
    usesHeight: true,\r
    usesWidth: true,\r
\r
    constructor: function () {\r
        this.callParent(arguments);\r
        this.mixins.elementCt.constructor.call(this);\r
    },\r
\r
    destroy: function() {\r
        this.callParent();\r
        this.mixins.elementCt.destroy.call(this);\r
    },\r
\r
    /**\r
     * In addition to work done by our base classes, containers benefit from some extra\r
     * cached data. The following properties are added to the ownerContext:\r
     *\r
     *  - visibleItems: the result of {@link #getVisibleItems}\r
     *  - childItems: the ContextItem[] for each visible item\r
     *  - targetContext: the ContextItem for the {@link #getTarget} element\r
     */\r
    beginLayout: function (ownerContext) {\r
        this.callParent(arguments);\r
\r
        ownerContext.targetContext = ownerContext.paddingContext = ownerContext.getEl('getTarget', this);\r
\r
        this.cacheChildItems(ownerContext);\r
    },\r
\r
    beginLayoutCycle: function (ownerContext, firstCycle) {\r
        var me = this;\r
\r
        me.callParent(arguments);\r
\r
        if (firstCycle) {\r
            if (me.usesContainerHeight) {\r
                ++ownerContext.consumersContainerHeight;\r
            }\r
            if (me.usesContainerWidth) {\r
                ++ownerContext.consumersContainerWidth;\r
            }\r
        }\r
    },\r
\r
    cacheChildItems: function (ownerContext) {\r
        var me = this,\r
            context, childItems, items, length, i;\r
\r
        // if we neither read nor set the size of our items, we can skip creation of\r
        // the childItems array\r
        if (me.needsItemSize || me.setsItemSize) {\r
            context = ownerContext.context;\r
            childItems = ownerContext.childItems = [];\r
            items = ownerContext.visibleItems = me.getVisibleItems();\r
            length = items.length;\r
\r
            for (i = 0; i < length; ++i) {\r
                childItems.push(context.getCmp(items[i]));\r
            }\r
        }\r
    },\r
\r
    cacheElements: function () {\r
        var owner = this.owner;\r
\r
        this.attachChildEls(owner.el, owner); // from ElementContainer mixin\r
    },\r
\r
    calculate: function(ownerContext) {\r
        var props = ownerContext.props,\r
            el = ownerContext.el;\r
\r
        if (ownerContext.widthModel.shrinkWrap && isNaN(props.width)) {\r
            ownerContext.setContentWidth(el.getWidth());\r
        }\r
\r
        if (ownerContext.heightModel.shrinkWrap && isNaN(props.height)) {\r
            ownerContext.setContentHeight(el.getHeight());\r
        }\r
    },\r
\r
    /**\r
     * Adds layout's itemCls and owning Container's itemCls\r
     * @protected\r
     */\r
    configureItem: function(item) {\r
        var me = this,\r
            itemCls = me.itemCls,\r
            ownerItemCls = me.owner.itemCls,\r
            needsCopy,\r
            addClasses;\r
\r
        // Effectively callParent but without the function overhead\r
        item.ownerLayout = me;\r
\r
        if (itemCls) {\r
            // itemCls can be a single class or an array\r
            if (typeof itemCls === 'string') {\r
                addClasses = [itemCls];\r
            } else {\r
                addClasses = itemCls;\r
                needsCopy = !!addClasses;\r
            }\r
        }\r
        if (ownerItemCls) {\r
            // Add some extra logic so we don't clone the array unnecessarily\r
            if (needsCopy) {\r
                addClasses = Ext.Array.clone(addClasses);\r
            }\r
            addClasses = Ext.Array.push(addClasses || [], ownerItemCls);\r
        }\r
        if (addClasses) {\r
            item.addCls(addClasses);\r
        }\r
    },\r
\r
    doRenderBody: function (out, renderData) {\r
        // Careful! This method is bolted on to the renderTpl so all we get for context is\r
        // the renderData! The "this" pointer is the renderTpl instance!\r
\r
        this.renderItems(out, renderData);\r
        this.renderContent(out, renderData);\r
    },\r
\r
    doRenderContainer: function (out, renderData) {\r
        // Careful! This method is bolted on to the renderTpl so all we get for context is\r
        // the renderData! The "this" pointer is the renderTpl instance!\r
\r
        var me = renderData.$comp.layout,\r
            tpl = me.getRenderTpl(),\r
            data = me.getRenderData();\r
\r
        tpl.applyOut(data, out);\r
    },\r
\r
    doRenderItems: function (out, renderData) {\r
        // Careful! This method is bolted on to the renderTpl so all we get for context is\r
        // the renderData! The "this" pointer is the renderTpl instance!\r
\r
        var me = renderData.$layout,\r
            tree = me.getRenderTree();\r
\r
        if (tree) {\r
            Ext.DomHelper.generateMarkup(tree, out);\r
        }\r
    },\r
\r
    finishRender: function () {\r
        var me = this,\r
            target, items;\r
\r
        me.callParent();\r
\r
        me.cacheElements();\r
\r
        target = me.getRenderTarget();\r
        items = me.getLayoutItems();\r
\r
        me.finishRenderItems(target, items);\r
    },\r
\r
    /**\r
     * @private\r
     * Called for every layout in the layout context after all the layouts have been finally flushed\r
     */\r
    notifyOwner: function() {\r
        //<debug>\r
        if (!this._hasTargetWarning && this.targetCls && !this.getTarget().hasCls(this.targetCls)) {\r
            this._hasTargetWarning = true;\r
            Ext.log.warn('targetCls is missing. This may mean that getTargetEl() is being overridden but not applyTargetCls(). ' + this.owner.id);\r
        }\r
        //</debug>\r
        this.owner.afterLayout(this);\r
    },\r
\r
    /**\r
     * Returns the container size (that of the target). Only the fixed-sized dimensions can\r
     * be returned because the shrinkWrap dimensions are based on the contentWidth/Height\r
     * as determined by the container layout.\r
     *\r
     * @param {Ext.layout.ContextItem} ownerContext The owner's context item.\r
     * @param {Boolean} [inDom=false] True if the container size must be in the DOM.\r
     * @return {Object} The size\r
     * @return {Number} return.width The width\r
     * @return {Number} return.height The height\r
     * @protected\r
     */\r
    getContainerSize : function(ownerContext, inDom) {\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 targetContext = ownerContext.targetContext,\r
            frameInfo = targetContext.getFrameInfo(),\r
            padding = ownerContext.paddingContext.getPaddingInfo(),\r
            got = 0,\r
            needed = 0,\r
            gotWidth, gotHeight, width, height;\r
\r
        // In an shrinkWrap width/height case, we must not ask for any of these dimensions\r
        // because they will be determined by contentWidth/Height which is calculated by\r
        // this layout...\r
\r
        // Fit/Card layouts are able to set just the width of children, allowing child's\r
        // resulting height to autosize the Container.\r
        // See examples/tabs/tabs.html for an example of this.\r
\r
        if (!ownerContext.widthModel.shrinkWrap) {\r
            ++needed;\r
            width = inDom ? targetContext.getDomProp('width') : targetContext.getProp('width');\r
            gotWidth = (typeof width === 'number');\r
            if (gotWidth) {\r
                ++got;\r
                width -= frameInfo.width + padding.width;\r
                if (width < 0) {\r
                    width = 0;\r
                }\r
            }\r
        }\r
\r
        if (!ownerContext.heightModel.shrinkWrap) {\r
            ++needed;\r
            height = inDom ? targetContext.getDomProp('height') : targetContext.getProp('height');\r
            gotHeight = (typeof height === 'number');\r
            if (gotHeight) {\r
                ++got;\r
                height -= frameInfo.height + padding.height;\r
                if (height < 0) {\r
                    height = 0;\r
                }\r
            }\r
        }\r
\r
        return {\r
            width: width,\r
            height: height,\r
            needed: needed,\r
            got: got,\r
            gotAll: got === needed,\r
            gotWidth: gotWidth,\r
            gotHeight: gotHeight\r
        };\r
    },\r
\r
    // This method is used to offset the DOM position when checking\r
    // whether the element is a certain child of the target. This is\r
    // required in cases where the extra elements prepended to the target\r
    // before any of the items. An example of this is when using labelAlign: 'top'\r
    // on a field. The label appears first in the DOM before any child items are\r
    // created, so when we check the position we need to add an extra offset.\r
    // Containers that create an innerCt are exempt because this new element\r
    // preserves the order\r
    getPositionOffset: function(position) {\r
        if (!this.createsInnerCt) {\r
            var offset = this.owner.itemNodeOffset;\r
            if (offset) {\r
                position += offset;\r
            }\r
        }\r
        return position;\r
    },\r
\r
    /**\r
     * Returns an array of child components either for a render phase (Performed in the beforeLayout\r
     * method of the layout's base class), or the layout phase (onLayout).\r
     * @return {Ext.Component[]} of child components\r
     */\r
    getLayoutItems: function() {\r
        var owner = this.owner,\r
            items = owner && owner.items;\r
\r
        return (items && items.items) || [];\r
    },\r
\r
    getRenderData: function () {\r
        var comp = this.owner;\r
\r
        return {\r
            $comp: comp,\r
            $layout: this,\r
            ownerId: comp.id\r
        };\r
    },\r
\r
    /**\r
     * @protected\r
     * Returns all items that are rendered\r
     * @return {Array} All matching items\r
     */\r
    getRenderedItems: function() {\r
        var me = this,\r
            target = me.getRenderTarget(),\r
            items = me.getLayoutItems(),\r
            ln = items.length,\r
            renderedItems = [],\r
            i, item;\r
\r
        for (i = 0; i < ln; i++) {\r
            item = items[i];\r
            if (item.rendered && me.isValidParent(item, target, i)) {\r
                renderedItems.push(item);\r
            }\r
        }\r
\r
        return renderedItems;\r
    },\r
\r
    /**\r
     * Returns the element into which rendering must take place. Defaults to the owner Container's\r
     * target element.\r
     *\r
     * May be overridden in layout managers which implement an inner element.\r
     *\r
     * @return {Ext.dom.Element}\r
     */\r
    getRenderTarget: function() {\r
        return this.owner.getTargetEl();\r
    },\r
\r
    /**\r
     * Returns the element into which extra functional DOM elements can be inserted. Defaults to the owner Component's encapsulating element.\r
     *\r
     * May be overridden in Component layout managers which implement a {@link #getRenderTarget component render target} which must only\r
     * contain child components.\r
     * @return {Ext.dom.Element}\r
     */\r
    getElementTarget: function() {\r
        return this.getRenderTarget();\r
    },\r
\r
    getRenderTpl: function () {\r
        var me = this,\r
            renderTpl = Ext.XTemplate.getTpl(this, 'renderTpl');\r
\r
        // Make sure all standard callout methods for the owner component are placed on the\r
        // XTemplate instance (but only once please):\r
        if (!renderTpl.renderContent) {\r
            me.owner.setupRenderTpl(renderTpl);\r
        }\r
\r
        return renderTpl;\r
    },\r
\r
    getRenderTree: function () {\r
        var result,\r
            items = this.owner.items,\r
            itemsGen,\r
            renderCfgs = {};\r
\r
        do {\r
            itemsGen = items.generation;\r
            result = this.getItemsRenderTree(this.getLayoutItems(), renderCfgs);\r
        } while (items.generation !== itemsGen);\r
        return result;\r
    },\r
\r
    renderChildren: function () {\r
        var me = this,\r
            ownerItems = me.owner.items,\r
            target = me.getRenderTarget(),\r
            itemsGen, items;\r
\r
        // During the render phase, new items may be added. Specifically, a panel will\r
        // create a placeholder component during render if required, so we need to catch\r
        // it here so we can render it.\r
        do {\r
            itemsGen = ownerItems.generation;\r
            items = me.getLayoutItems();\r
            me.renderItems(items, target);\r
        } while (ownerItems.generation !== itemsGen);\r
    },\r
\r
    getScrollbarsNeeded: function (width, height, contentWidth, contentHeight) {\r
        var scrollbarSize = Ext.getScrollbarSize(),\r
            hasWidth = typeof width === 'number',\r
            hasHeight = typeof height === 'number',\r
            needHorz = 0,\r
            needVert = 0;\r
\r
        // No space-consuming scrollbars.\r
        if (!scrollbarSize.width) {\r
            return 0;\r
        }\r
        if (hasHeight && height < contentHeight) {\r
            needVert = 2;\r
            width -= scrollbarSize.width;\r
        }\r
\r
        if (hasWidth && width < contentWidth) {\r
            needHorz = 1;\r
            if (!needVert && hasHeight) {\r
                height -= scrollbarSize.height;\r
                if (height < contentHeight) {\r
                    needVert = 2;\r
                }\r
            }\r
        }\r
\r
        return needVert + needHorz;\r
    },\r
\r
    /**\r
     * Returns the owner component's resize element.\r
     * @return {Ext.dom.Element}\r
     */\r
    getTarget: function() {\r
        return this.owner.getTargetEl();\r
    },\r
\r
    /**\r
     * @protected\r
     * Returns all items that are both rendered and visible\r
     * @return {Array} All matching items\r
     */\r
    getVisibleItems: function() {\r
        var target = this.getRenderTarget(),\r
            items = this.getLayoutItems(),\r
            ln = items.length,\r
            visibleItems = [],\r
            i, item;\r
\r
        for (i = 0; i < ln; i++) {\r
            item = items[i];\r
            if (item.rendered && this.isValidParent(item, target, i) && item.hidden !== true && !item.floated) {\r
                visibleItems.push(item);\r
            }\r
        }\r
\r
        return visibleItems;\r
    },\r
\r
    getMoveAfterIndex: function (after) {\r
        return this.owner.items.indexOf(after) + 1;\r
    },\r
\r
    moveItemBefore: function (item, before) {\r
        var owner = this.owner,\r
            items = owner.items,\r
            index = items.indexOf(item),\r
            toIndex;\r
\r
        if (item === before) {\r
            return item;\r
        }\r
\r
        if (before) {\r
            toIndex =  items.indexOf(before);\r
            if (index > -1 && index < toIndex) {\r
                --toIndex;\r
            }\r
        } else {\r
            toIndex = items.length;\r
        }\r
\r
        return owner.insert(toIndex, item);\r
    },\r
\r
    setupRenderTpl: function (renderTpl) {\r
        renderTpl.renderBody = this.doRenderBody;\r
        renderTpl.renderContainer = this.doRenderContainer;\r
        renderTpl.renderItems = this.doRenderItems;\r
    },\r
\r
    getContentTarget: function(){\r
        return this.owner.getDefaultContentTarget();\r
    },\r
\r
    onAdd: function (item) {\r
        if (!item.liquidLayout) {\r
            ++this.activeItemCount;\r
        }\r
        this.callParent([item]);\r
    },\r
\r
    onRemove: function(item, isDestroying) {\r
        if (!item.liquidLayout) {\r
            --this.activeItemCount;\r
        }\r
        this.callParent([item, isDestroying]);\r
    }\r
});\r