add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / grid / HeaderContainer.js

/**\r
 * @class Ext.grid.HeaderContainer\r
 * @extends Ext.Container\r
 * Description\r
 */\r
Ext.define('Ext.grid.HeaderContainer', {\r
    extend: 'Ext.Container',\r
    xtype: 'headercontainer',\r
\r
    config: {\r
        baseCls: Ext.baseCSSPrefix + 'grid-header-container',\r
        docked: 'top',\r
        defaultType: 'column',\r
        layout: {\r
            type: 'hbox',\r
            align: 'stretch'\r
        },\r
\r
        /**\r
         * @private\r
         * Set this to `false` to disable sorting via tap on all column headers\r
         */\r
        sortable: true,\r
\r
        scrollable: {\r
            autoRefresh: null,\r
            x: false,\r
            y: false\r
        },\r
\r
        grid: null\r
    },\r
\r
    initialize: function() {\r
        var me = this;\r
\r
        me.columns = [];\r
\r
        me.callParent();\r
\r
        me.on({\r
            tap: 'onHeaderTap',\r
            columnresize: 'onColumnResize',\r
            show: 'onColumnShow',\r
            hide: 'onColumnHide',\r
            sort: 'onColumnSort',\r
            scope: me,\r
            delegate: 'column'\r
        });\r
\r
        me.on({\r
            show: 'onGroupShow',\r
            hide: 'onGroupHide',\r
            add: 'onColumnAdd',\r
            move: 'onColumnMove',\r
            remove: 'onColumnRemove',\r
            scope: me,\r
            delegate: 'gridheadergroup'\r
        });\r
\r
        me.on({\r
            add: 'onColumnAdd',\r
            move: 'onColumnMove',\r
            remove: 'onColumnRemove',\r
            scope: me\r
        });\r
    },\r
\r
    factoryItem: function (item) {\r
        // If the columns contains a columns config, then create a HeaderGroup\r
        if (item.columns) {\r
            return Ext.factory(item, Ext.grid.HeaderGroup);\r
        }\r
        return this.callParent([item]);\r
    },\r
\r
    getColumns: function() {\r
        return this.columns;\r
    },\r
\r
    getAbsoluteColumnIndex: function(column) {\r
        var items = this.getInnerItems(),\r
            ln = items.length,\r
            index = 0,\r
            innerIndex, i, item;\r
\r
        for (i = 0; i < ln; i++) {\r
            item = items[i];\r
\r
            if (item === column) {\r
                return index;\r
            }\r
            else if (item.isHeaderGroup) {\r
                innerIndex = item.innerIndexOf(column);\r
                if (innerIndex !== -1) {\r
                    index += innerIndex;\r
                    return index;\r
                }\r
                else {\r
                    index += item.getInnerItems().length;\r
                }\r
            }\r
            else {\r
                index += 1;\r
            }\r
        }\r
    },\r
\r
    onColumnAdd: function(parent, column) {\r
        var me = this,\r
            columns = me.columns,\r
            columnIndex = me.getAbsoluteColumnIndex(column),\r
            groupColumns, ln, i;\r
\r
        if (column.isHeaderGroup) {\r
            groupColumns = column.getItems().items;\r
\r
            for (i = 0, ln = groupColumns.length; i < ln; i++) {\r
                columns.splice(columnIndex + i, 0, groupColumns[i]);\r
                me.fireEvent('columnadd', me, groupColumns[i], column);\r
            }\r
        } else {\r
            columns.splice(columnIndex, 0, column);\r
            me.fireEvent('columnadd', me, column, null);\r
        }\r
    },\r
\r
    onColumnMove: function(parent, column) {\r
        var me = this,\r
            columns = me.columns,\r
            columnIndex = me.getAbsoluteColumnIndex(column),\r
            groupColumns, ln, i, groupColumn,\r
            after, oldIndex, fromIdx, toIdx;\r
\r
        if (column.isHeaderGroup) {\r
            groupColumns = column.getItems().items;\r
\r
            for (i = 0, ln = groupColumns.length; i < ln; i++) {\r
                groupColumn = groupColumns[i];\r
\r
                if (i === 0) {\r
                    oldIndex = columns.indexOf(groupColumn);\r
                    after = oldIndex - columnIndex < 0;\r
                }\r
\r
                // Treat the moves as sequential\r
                if (after) {\r
                    // |  Group   | c | d     ->     | c | d |   Group   | \r
                    //    a   b                                  a   b\r
                    //    \r
                    // We need to fire:\r
                    // a from 0 -> 3, since b is still in place\r
                    // b from 0 -> 3, to account for a still in place\r
                    toIdx = columnIndex + ln - 1;\r
                    fromIdx = oldIndex;\r
                } else {\r
                    // | c | d |   Group   |      ->     |  Group   | c | d \r
                    //             a   b                    a   b\r
                    //    \r
                    // We need to fire:\r
                    // a from 2 -> 0\r
                    // b from 2 -> 1, to account for a moving\r
                    fromIdx = oldIndex + i;\r
                    toIdx = columnIndex + i;\r
                }\r
                Ext.Array.move(columns, fromIdx, toIdx);\r
                me.fireEvent('columnmove', me, groupColumn, column, fromIdx, toIdx);\r
            }\r
        } else {\r
            fromIdx = columns.indexOf(column);\r
            toIdx = columnIndex;\r
            Ext.Array.move(columns, fromIdx, toIdx);\r
            me.fireEvent('columnmove', me, column, null, fromIdx, toIdx);\r
        }\r
    },\r
\r
    onColumnRemove: function(parent, column) {\r
        if (column.isHeaderGroup) {\r
            var columns = column.getItems().items,\r
                ln = columns.length,\r
                i;\r
\r
            for (i = 0; i < ln; i++) {\r
                Ext.Array.remove(this.columns, columns[i]);\r
                this.fireEvent('columnremove', this, columns[i]);\r
            }\r
        } else {\r
            Ext.Array.remove(this.columns, column);\r
            this.fireEvent('columnremove', this, column);\r
        }\r
    },\r
\r
    onHeaderTap: function(column) {\r
        if (this.getSortable() && !column.getIgnore() && column.getSortable()) {\r
            var sortDirection = column.getSortDirection() || 'DESC',\r
                newDirection = (sortDirection === 'DESC') ? 'ASC' : 'DESC';\r
\r
            column.setSortDirection(newDirection);\r
        }\r
\r
        this.fireEvent('columntap', this, column);\r
    },\r
\r
    onColumnShow: function(column) {\r
        this.fireEvent('columnshow', this, column);\r
    },\r
\r
    onColumnHide: function(column) {\r
        this.fireEvent('columnhide', this, column);\r
    },\r
\r
    onGroupShow: function(group) {\r
        var columns = group.getInnerItems(),\r
            ln = columns.length,\r
            i, column;\r
\r
        for (i = 0; i < ln; i++) {\r
            column = columns[i];\r
            if (!column.isHidden()) {\r
                this.fireEvent('columnshow', this, column);\r
            }\r
        }\r
    },\r
\r
    onGroupHide: function(group) {\r
        var columns = group.getInnerItems(),\r
            ln = columns.length,\r
            i, column;\r
\r
        for (i = 0; i < ln; i++) {\r
            column = columns[i];\r
            this.fireEvent('columnhide', this, column);\r
        }\r
    },\r
\r
    onColumnResize: function(column, width, oldWidth) {\r
        this.fireEvent('columnresize', this, column, width, oldWidth);\r
    },\r
\r
    onColumnSort: function(column, direction, newDirection) {\r
        if (direction !== null) {\r
            this.fireEvent('columnsort', this, column, direction, newDirection);\r
        }\r
    },\r
\r
    scrollTo: function(x) {\r
        this.getScrollable().scrollTo(x);\r
    },\r
\r
    setTotalWidth: function(totalWidth) {\r
        var scrollable = this.getScrollable(),\r
            innerElement;\r
\r
        if (scrollable && scrollable.isTouchScroller) {\r
            innerElement = scrollable.getInnerElement();\r
            if (innerElement) {\r
                innerElement.setWidth(totalWidth);\r
\r
                scrollable.setSize({\r
                    x: totalWidth,\r
                    y: scrollable.getSize().y\r
                });\r
            }\r
        }\r
    },\r
\r
    destroy: function() {\r
        var me = this,\r
            task = me.spacerTask;\r
\r
        if (task) {\r
            task.cancel();\r
            me.spacerTask = null;\r
        }\r
        me.setGrid(null);\r
        me.callParent();\r
    },\r
\r
    privates: {\r
        updateSpacer: function() {\r
            var me = this,\r
                task = me.spacerTask;\r
\r
            if (!task) {\r
                me.spacerTask = task = new Ext.util.DelayedTask(me.doUpdateSpacer, me);\r
            }\r
            task.delay(1);\r
        },\r
\r
        doUpdateSpacer: function() {\r
            var scrollable = this.getGrid().getScrollable();\r
            this.element.setStyle('padding-right', scrollable.getScrollbarSize().width + 'px');\r
        }\r
    }\r
});\r