add extjs 6.0.1 sources

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

/**\r
 * This layout extends `Ext.layout.container.Column` and adds splitters between adjacent\r
 * columns allowing the user to resize them.\r
 * @private\r
 */\r
Ext.define('Ext.layout.container.Dashboard', {\r
    extend: 'Ext.layout.container.Column',\r
    alias: 'layout.dashboard',\r
\r
    requires: [\r
        'Ext.layout.container.ColumnSplitter'\r
    ],\r
\r
    type: 'dashboard',\r
\r
    firstColumnCls: Ext.baseCSSPrefix + 'dashboard-column-first',\r
\r
    lastColumnCls: Ext.baseCSSPrefix + 'dashboard-column-last',\r
\r
    /*\r
     * The geometry of a Column layout with splitters between respective items:\r
     *\r
     *             0        1      2       3        4\r
     *      +-----------------------------------------------+\r
     *      | +-----------+ || +---------+ || +-----------+ | \\r
     *      | |           | || |         | || |           | |  \\r
     *      | |           | || |         | || |           | |   \\r
     *      | |           | || |         | || |           | |    \\r
     *      | +-----------+ || |         | || |           | |   row[0]\r
     *      |               || |         | || |           | |    /\r
     *      |               || |         | || |           | |   /\r
     *      |               || |         | || +-----------+ |  /\r
     *      |               || |         | ||               | /\r
     *      |               || +---------+ ||               |\r
     *      | +-------------------+ || +------------------+ | \\r
     *      | |                   | || |                  | |  \\r
     *      | |                   | || |                  | |   \\r
     *      | |                   | || |                  | |  row[1]\r
     *      | |                   | || |                  | |   /\r
     *      | |                   | || +------------------+ |  /\r
     *      | +-------------------+ ||                      | /\r
     *      +-----------------------------------------------+\r
     *                  6           7            8\r
     *\r
     * The splitter between 4 and 6 will be hidden but still present in the items. It is\r
     * considered part of row[0].\r
     */\r
\r
    getSplitterConfig: function () {\r
        return {\r
           xtype: 'columnsplitter'\r
        };\r
    },\r
\r
    /**\r
     * @private\r
     * Returns a filtered item list sans splitters\r
     * @param items\r
     * @return {Array|*}\r
     */\r
    getColumns : function(items) {\r
        var array = Ext.Array;\r
        return array.filter(array.from(items), function(item) {\r
            return item.target && item.target.isSplitter !== true;\r
        });\r
    },\r
\r
    beginLayout: function (ownerContext) {\r
        var me = this;\r
        me.callParent([ownerContext]);\r
\r
        // We need to reset the heights of the splitters so that they don't influence the\r
        // layout (mostly overflow management).\r
        var childItems = ownerContext.childItems,\r
            rows = (ownerContext.rows = []),\r
            length = childItems.length,\r
            totalWidth = 2,\r
            columnTargets = 0,\r
            lastRow = 0,\r
            maxColumns = me.owner.getMaxColumns(),\r
            child, i, prev, row, splitter, target, width;\r
\r
        for (i = 0; i < length; ++i) {\r
            target = (child = childItems[i]).target;\r
            splitter = target && target.isSplitter;\r
            columnTargets += (splitter ? 0 : 1);\r
            width = splitter ? 0 : target.columnWidth || 1;\r
\r
            if (totalWidth + width > 1 || (maxColumns && (columnTargets > maxColumns))) {\r
                if (prev) {\r
                    // We have wrapped and we have a previous item which is a splitter by\r
                    // definition. We have previously seen that splitter and setHeight(0)\r
                    // on it. We now setHeight(0) to effectively hide it.\r
                    prev.orphan = 1;\r
                    prev.el.setHeight(0);\r
                }\r
                totalWidth = 0;\r
                columnTargets = 1;\r
\r
                if (rows.length) {\r
                    // We have encountered a row break condition\r
                    // As this is floating layout, classify the current row\r
                    // before proceeding\r
                    lastRow = rows.length - 1;\r
                    me.syncFirstLast(\r
                        me.getColumns(rows[lastRow].items)\r
                    );\r
                }\r
                rows.push(row = {\r
                    index: rows.length,\r
                    items: [],\r
                    maxHeight: 0\r
                });\r
            }\r
\r
            totalWidth += width;\r
            row.items.push(child);\r
            child.row = row;\r
            target.rowIndex = row.index;\r
\r
            if (splitter) {\r
                child.el.setHeight(1);\r
            }\r
\r
            prev = child;\r
        }\r
\r
        if (rows.length ) {\r
            me.syncFirstLast(\r
                me.getColumns(rows[rows.length-1].items)\r
            );\r
        }\r
    },\r
\r
    beforeLayoutCycle: function (ownerContext) {\r
        var me = this,\r
            items = me.owner.items;\r
\r
        // We need to do this in beforeLayoutCycle because this changes the child items\r
        // and hence needs to be considered before recursing.\r
        if (me.splitterGen !== items.generation) {\r
            me.syncSplitters();\r
\r
            // The syncSplitters call will change items.generation so do this last.\r
            me.splitterGen = items.generation;\r
        }\r
\r
        me.callParent(arguments);\r
    },\r
\r
    finishedLayout: function (ownerContext) {\r
        var items = ownerContext.childItems,\r
            len = items.length,\r
            box, child, i, target, row;\r
\r
        this.callParent([ownerContext]);\r
\r
        for (i = 0; i < len; i += 2) {\r
            target = (child = items[i]).target;\r
            box = target.lastBox;\r
            row = child.row;\r
            row.maxHeight = Math.max(row.maxHeight, box.height);\r
\r
            // Put this on the component so that it gets saved (we use this to fix up\r
            // columnWidth on restore)\r
            target.width = box.width;\r
        }\r
\r
        for (i = 1; i < len; i += 2) {\r
            target = (child = items[i]).target;\r
            if (!child.orphan) {\r
                target.el.setHeight(child.row.maxHeight);\r
            }\r
        }\r
    },\r
\r
    /**\r
     * This method synchronizes the splitters so that we have exactly one between each\r
     * column.\r
     * @private\r
     */\r
    syncSplitters: function () {\r
        var me = this,\r
            owner = me.owner,\r
            items = owner.items.items,\r
            index = items.length,\r
            ok = true,\r
            shouldBeSplitter = false,\r
            item, splitter;\r
\r
        // Walk backwards over the items so that an insertion index is stable.\r
        while (index-- > 0) {\r
            item = items[index];\r
\r
            if (shouldBeSplitter) {\r
                if (item.isSplitter) {\r
                    shouldBeSplitter = false;\r
                } else {\r
                    // An item is adjacent to an item, so inject a splitter beyond\r
                    // the current item to separate the columns. Keep shouldBeSplitter\r
                    // at true since we just encountered an item.\r
                    if (ok) {\r
                        ok = false;\r
                        owner.suspendLayouts();\r
                    }\r
                    splitter = owner.add(index+1, me.getSplitterConfig());\r
                }\r
            } else {\r
                if (item.isSplitter) {\r
                    // A splitter is adjacent to a splitter so we remove this one. We\r
                    // leave shouldBeSplitter at false because the next thing we see\r
                    // should still not be a splitter.\r
                    if (ok) {\r
                        ok = false;\r
                        owner.suspendLayouts();\r
                    }\r
                    owner.remove(item);\r
                } else {\r
                    shouldBeSplitter = true;\r
                }\r
            }\r
        }\r
\r
        // It is possible to exit the above with a splitter as the first item, but\r
        // this is invalid so remove any such splitters.\r
        while (items.length && (item = items[0]).isSplitter) {\r
            if (ok) {\r
                ok = false;\r
                owner.suspendLayouts();\r
            }\r
            owner.remove(item);\r
        }\r
\r
        if (!ok) {\r
            owner.resumeLayouts();\r
        }\r
    },\r
\r
    syncFirstLast: function (items) {\r
        var me = this,\r
            firstCls = me.firstColumnCls,\r
            lastCls = me.lastColumnCls,\r
            len,\r
            firstAndLast = [firstCls, lastCls],\r
            i, item, last;\r
\r
        items = Ext.Array.from(items);\r
        len = items.length;\r
\r
        for (i = 0; i < len; ++i ) {\r
            item = items[i].target;\r
            last = (i === len-1);\r
\r
            if (!i) { // if (first)\r
                if (last) {\r
                    item.addCls(firstAndLast);\r
                } else {\r
                    item.addCls(firstCls);\r
                    item.removeCls(lastCls);\r
                }\r
            } else if (last) {\r
                item.addCls(lastCls);\r
                item.removeCls(firstCls);\r
            } else {\r
                item.removeCls(firstAndLast);\r
            }\r
        }\r
    }\r
});\r