add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / layout / FlexBox.js

/**\r
 * AbstractBox is a superclass for the two box layouts:\r
 *\r
 * * {@link Ext.layout.HBox hbox}\r
 * * {@link Ext.layout.VBox vbox}\r
 *\r
 * FlexBox itself is never used directly, but its subclasses provide flexible arrangement of child components\r
 * inside a {@link Ext.Container Container}.\r
 *\r
 * ## Horizontal Box\r
 *\r
 * HBox allows you to easily lay out child components horizontally. It can size items based on a fixed width or a\r
 * fraction of the total width available, enabling you to achieve flexible layouts that expand or contract to fill the\r
 * space available.\r
 *\r
 * {@img ../guides/layouts/hbox.jpg}\r
 *\r
 * See the {@link Ext.layout.HBox HBox layout docs} for more information on using hboxes.\r
 *\r
 * ## Vertical Box\r
 *\r
 * VBox allows you to easily lay out child components verticaly. It can size items based on a fixed height or a\r
 * fraction of the total height available, enabling you to achieve flexible layouts that expand or contract to fill the\r
 * space available.\r
 *\r
 * See the {@link Ext.layout.VBox VBox layout docs} for more information on using vboxes.\r
 */\r
Ext.define('Ext.layout.FlexBox', {\r
    extend: 'Ext.layout.Box',\r
\r
    alias: 'layout.box',\r
\r
    config: {\r
        align: 'stretch'\r
    },\r
\r
    layoutBaseClass: 'x-layout-box',\r
\r
    itemClass: 'x-layout-box-item',\r
\r
    setContainer: function(container) {\r
        this.callParent(arguments);\r
\r
        this.monitorSizeFlagsChange();\r
    },\r
\r
    applyOrient: function(orient) {\r
        //<debug>\r
        if (orient !== 'horizontal' && orient !== 'vertical') {\r
            Ext.Logger.error("Invalid box orient of: '" + orient + "', must be either 'horizontal' or 'vertical'");\r
        }\r
        //</debug>\r
\r
        return orient;\r
    },\r
\r
    updateOrient: function(orient, oldOrient) {\r
        var container = this.container,\r
            delegation = {\r
                delegate: '> component'\r
            };\r
\r
        if (orient === 'horizontal') {\r
            this.sizePropertyName = 'width';\r
        }\r
        else {\r
            this.sizePropertyName = 'height';\r
        }\r
\r
        container.innerElement.swapCls('x-' + orient, 'x-' + oldOrient);\r
\r
        if (oldOrient) {\r
            container.un(oldOrient === 'horizontal' ? 'widthchange' : 'heightchange', 'onItemSizeChange', this, delegation);\r
            this.redrawContainer();\r
        }\r
\r
        container.on(orient === 'horizontal' ? 'widthchange' : 'heightchange', 'onItemSizeChange', this, delegation);\r
    },\r
\r
    onItemInnerStateChange: function(item, isInner) {\r
        this.callParent(arguments);\r
\r
        var flex, size;\r
\r
        item.toggleCls(this.itemClass, isInner);\r
\r
        if (isInner) {\r
            flex = item.getFlex();\r
            size = item.getConfig(this.sizePropertyName);\r
\r
            if (flex) {\r
                this.doItemFlexChange(item, flex);\r
            }\r
            else if (size) {\r
                this.doItemSizeChange(item, size);\r
            }\r
        }\r
\r
        this.refreshItemSizeState(item);\r
    },\r
\r
    refreshItemSizeState: function(item) {\r
        var isInner = item.isInnerItem(),\r
            container = this.container,\r
            LAYOUT_HEIGHT = container.LAYOUT_HEIGHT,\r
            LAYOUT_WIDTH = container.LAYOUT_WIDTH,\r
            dimension = this.sizePropertyName,\r
            layoutSizeFlags = 0,\r
            containerSizeFlags = container.getSizeFlags();\r
\r
        if (isInner) {\r
            layoutSizeFlags |= container.LAYOUT_STRETCHED;\r
\r
            if (this.getAlign() === 'stretch') {\r
                layoutSizeFlags |= containerSizeFlags & (dimension === 'width' ? LAYOUT_HEIGHT : LAYOUT_WIDTH);\r
            }\r
\r
            if (item.getFlex()) {\r
                layoutSizeFlags |= containerSizeFlags & (dimension === 'width' ? LAYOUT_WIDTH : LAYOUT_HEIGHT);\r
            }\r
        }\r
\r
        item.setLayoutSizeFlags(layoutSizeFlags);\r
    },\r
\r
    refreshAllItemSizedStates: function() {\r
        var innerItems = this.container.innerItems,\r
            i, ln, item;\r
\r
        for (i = 0,ln = innerItems.length; i < ln; i++) {\r
            item = innerItems[i];\r
            this.refreshItemSizeState(item);\r
        }\r
    },\r
\r
    onContainerSizeFlagsChange: function() {\r
        this.refreshAllItemSizedStates();\r
\r
        this.callParent(arguments);\r
    },\r
\r
    onItemSizeChange: function(item, size) {\r
        if (item.isInnerItem()) {\r
            this.doItemSizeChange(item, size);\r
        }\r
    },\r
\r
    doItemSizeChange: function(item, size) {\r
        if (size) {\r
            item.setFlex(null);\r
            this.redrawContainer();\r
        }\r
    },\r
\r
    onItemFlexChange: function(item, flex) {\r
        if (item.isInnerItem()) {\r
            this.doItemFlexChange(item, flex);\r
            this.refreshItemSizeState(item);\r
        }\r
    },\r
\r
    doItemFlexChange: function(item, flex) {\r
        this.setItemFlex(item, flex);\r
\r
        if (flex) {\r
            item.setConfig(this.sizePropertyName, null);\r
        }\r
        else {\r
            this.redrawContainer();\r
        }\r
    },\r
\r
    redrawContainer: function() {\r
        var container = this.container,\r
            renderedTo = container.element.dom.parentNode;\r
\r
        if (renderedTo && renderedTo.nodeType !== 11) {\r
            container.innerElement.redraw();\r
        }\r
    },\r
\r
    /**\r
     * Sets the flex of an item in this box layout.\r
     * @param {Ext.Component} item The item of this layout which you want to update the flex of.\r
     * @param {Number} flex The flex to set on this method\r
     */\r
    setItemFlex: function(item, flex) {\r
        var element = item.element,\r
            style = element.dom.style;\r
\r
        element.toggleCls(Ext.baseCSSPrefix + 'flexed', !!flex);\r
\r
        flex = flex ? String(flex) : '';\r
\r
        if (Ext.browser.is.WebKit) {\r
            style.setProperty('-webkit-box-flex', flex, null);\r
        } else if (Ext.browser.is.IE) {\r
            style.setProperty('-ms-flex', flex + ' 0 0px', null);\r
        } else {\r
            style.setProperty('flex', flex + ' 0 0px', null);\r
        }\r
    },\r
\r
    convertPosition: function(position) {\r
        var positionMap = this.positionMap;\r
\r
        if (positionMap.hasOwnProperty(position)) {\r
            return positionMap[position];\r
        }\r
\r
        return position;\r
    },\r
\r
    applyAlign: function(align) {\r
        return this.convertPosition(align);\r
    },\r
\r
    updateAlign: function(align, oldAlign) {\r
        var container = this.container;\r
\r
        container.innerElement.swapCls(align, oldAlign, true, 'x-align');\r
\r
        if (oldAlign !== undefined) {\r
            this.refreshAllItemSizedStates();\r
        }\r
    },\r
\r
    applyPack: function(pack) {\r
        return this.convertPosition(pack);\r
    },\r
\r
    updatePack: function(pack, oldPack) {\r
        this.container.innerElement.swapCls(pack, oldPack, true, 'x-pack');\r
    }\r
});\r