add extjs 6.0.1 sources

[extjs.git] / extjs / classic / classic / src / grid / feature / Summary.js

/**\r
 * This feature is used to place a summary row at the bottom of the grid. If using a grouping,\r
 * see {@link Ext.grid.feature.GroupingSummary}. There are 2 aspects to calculating the summaries,\r
 * calculation and rendering.\r
 *\r
 * ## Calculation\r
 * The summary value needs to be calculated for each column in the grid. This is controlled\r
 * by the summaryType option specified on the column. There are several built in summary types,\r
 * which can be specified as a string on the column configuration. These call underlying methods\r
 * on the store:\r
 *\r
 *  - {@link Ext.data.Store#count count}\r
 *  - {@link Ext.data.Store#sum sum}\r
 *  - {@link Ext.data.Store#min min}\r
 *  - {@link Ext.data.Store#max max}\r
 *  - {@link Ext.data.Store#average average}\r
 *\r
 * Alternatively, the summaryType can be a function definition. If this is the case,\r
 * the function is called with an array of records to calculate the summary value.\r
 *\r
 * ## Rendering\r
 * Similar to a column, the summary also supports a summaryRenderer function. This\r
 * summaryRenderer is called before displaying a value. The function is optional, if\r
 * not specified the default calculated value is shown. The summaryRenderer is called with:\r
 *\r
 *  - value {Object} - The calculated value.\r
 *  - summaryData {Object} - Contains all raw summary values for the row.\r
 *  - field {String} - The name of the field we are calculating\r
 *  - metaData {Object} - A collection of metadata about the current cell; can be used or modified by the renderer.\r
 *\r
 * ## Example Usage\r
 *\r
 *     @example\r
 *     Ext.define('TestResult', {\r
 *         extend: 'Ext.data.Model',\r
 *         fields: ['student', {\r
 *             name: 'mark',\r
 *             type: 'int'\r
 *         }]\r
 *     });\r
 *\r
 *     Ext.create('Ext.grid.Panel', {\r
 *         width: 400,\r
 *         height: 200,\r
 *         title: 'Summary Test',\r
 *         style: 'padding: 20px',\r
 *         renderTo: document.body,\r
 *         features: [{\r
 *             ftype: 'summary'\r
 *         }],\r
 *         store: {\r
 *             model: 'TestResult',\r
 *             data: [{\r
 *                 student: 'Student 1',\r
 *                 mark: 84\r
 *             },{\r
 *                 student: 'Student 2',\r
 *                 mark: 72\r
 *             },{\r
 *                 student: 'Student 3',\r
 *                 mark: 96\r
 *             },{\r
 *                 student: 'Student 4',\r
 *                 mark: 68\r
 *             }]\r
 *         },\r
 *         columns: [{\r
 *             dataIndex: 'student',\r
 *             text: 'Name',\r
 *             summaryType: 'count',\r
 *             summaryRenderer: function(value, summaryData, dataIndex) {\r
 *                 return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');\r
 *             }\r
 *         }, {\r
 *             dataIndex: 'mark',\r
 *             text: 'Mark',\r
 *             summaryType: 'average'\r
 *         }]\r
 *     });\r
 */\r
Ext.define('Ext.grid.feature.Summary', {\r
\r
    /* Begin Definitions */\r
\r
    extend: 'Ext.grid.feature.AbstractSummary',\r
\r
    alias: 'feature.summary',\r
\r
    /**\r
     * @cfg {String} dock\r
     * Configure `'top'` or `'bottom'` top create a fixed summary row either above or below the scrollable table.\r
     *\r
     */\r
    dock: undefined,\r
\r
    dockedSummaryCls: Ext.baseCSSPrefix + 'docked-summary',\r
\r
    panelBodyCls: Ext.baseCSSPrefix + 'summary-',\r
\r
    // turn off feature events.\r
    hasFeatureEvent: false,\r
\r
    fullSummaryTpl: [\r
        '{%',\r
            'var me = this.summaryFeature,',\r
            '    record = me.summaryRecord,',\r
            '    view = values.view,',\r
            '    bufferedRenderer = view.bufferedRenderer;',\r
\r
            'this.nextTpl.applyOut(values, out, parent);',\r
            'if (!me.disabled && me.showSummaryRow && view.store.isLast(values.record)) {',\r
                'if (bufferedRenderer) {',\r
                '    bufferedRenderer.variableRowHeight = true;',\r
                '}',\r
                'me.outputSummaryRecord((record && record.isModel) ? record : me.createSummaryRecord(view), values, out, parent);',\r
            '}',\r
        '%}', {\r
            priority: 300,\r
\r
            beginRowSync: function (rowSync) {\r
                rowSync.add('fullSummary', this.summaryFeature.summaryRowSelector);\r
            },\r
\r
            syncContent: function(destRow, sourceRow, columnsToUpdate) {\r
                destRow = Ext.fly(destRow, 'syncDest');\r
                sourceRow = Ext.fly(sourceRow, 'sycSrc');\r
                var owner = this.owner,\r
                    selector = owner.summaryRowSelector,\r
                    destSummaryRow = destRow.down(selector, true),\r
                    sourceSummaryRow = sourceRow.down(selector, true);\r
\r
                // Sync just the updated columns in the summary row.\r
                if (destSummaryRow && sourceSummaryRow) {\r
\r
                    // If we were passed a column set, only update those, otherwise do the entire row\r
                    if (columnsToUpdate) {\r
                        this.summaryFeature.view.updateColumns(destSummaryRow, sourceSummaryRow, columnsToUpdate);\r
                    } else {\r
                        Ext.fly(destSummaryRow).syncContent(sourceSummaryRow);\r
                    }\r
                }\r
            }\r
        }\r
    ],\r
\r
    init: function(grid) {\r
        var me = this,\r
            view = me.view,\r
            dock = me.dock;\r
\r
        me.callParent(arguments);\r
\r
        if (dock) {\r
            grid.addBodyCls(me.panelBodyCls + dock);\r
            grid.headerCt.on({\r
                add: me.onStoreUpdate,\r
                afterlayout: me.onStoreUpdate,\r
                scope: me\r
            });\r
            grid.on({\r
                beforerender: function() {\r
                    var tableCls = [me.summaryTableCls];\r
                    if (view.columnLines) {\r
                        tableCls[tableCls.length] = view.ownerCt.colLinesCls;\r
                    }\r
                    me.summaryBar = grid.addDocked({\r
                        childEls: ['innerCt', 'item'],\r
                        renderTpl: [\r
                            '<div id="{id}-innerCt" data-ref="innerCt" role="presentation">',\r
                                '<table id="{id}-item" data-ref="item" cellPadding="0" cellSpacing="0" class="' + tableCls.join(' ') + '">',\r
                                    '<tr class="' + me.summaryRowCls + '"></tr>',\r
                                '</table>',\r
                            '</div>'\r
                        ],\r
                        scrollable: {\r
                            x: false,\r
                            y: false\r
                        },\r
                        hidden: !me.showSummaryRow,\r
                        itemId: 'summaryBar',\r
                        cls: [ me.dockedSummaryCls, me.dockedSummaryCls + '-' + dock ],\r
                        xtype: 'component',\r
                        dock: dock,\r
                        weight: 10000000\r
                    })[0];\r
                },\r
                afterrender: function() {\r
                    grid.getView().getScrollable().addPartner(me.summaryBar.getScrollable());\r
                    me.onStoreUpdate();\r
                },\r
                single: true\r
            });\r
\r
            // Stretch the innerCt of the summary bar upon headerCt layout\r
            grid.headerCt.afterComponentLayout = Ext.Function.createSequence(grid.headerCt.afterComponentLayout, function() {\r
                var width = this.getTableWidth(),\r
                    innerCt = me.summaryBar.innerCt;\r
\r
                me.summaryBar.item.setWidth(width);\r
\r
                // "this" is the HeaderContainer. Its tooNarrow flag is set by its layout if the columns overflow.\r
                // Must not measure+set in after layout phase, this is a write phase.\r
                if (this.tooNarrow) {\r
                    width += Ext.getScrollbarSize().width;\r
                }\r
                innerCt.setWidth(width);\r
            });\r
        } else {\r
            if (grid.bufferedRenderer) {\r
                me.wrapsItem = true;\r
                view.addRowTpl(Ext.XTemplate.getTpl(me, 'fullSummaryTpl')).summaryFeature = me;\r
                view.on('refresh', me.onViewRefresh, me);\r
            } else {\r
                me.wrapsItem = false;\r
                me.view.addFooterFn(me.renderSummaryRow);\r
            }\r
        }\r
\r
        grid.ownerGrid.on({\r
            beforereconfigure: me.onBeforeReconfigure,\r
            columnmove: me.onStoreUpdate,\r
            scope: me\r
        });\r
        me.bindStore(grid, grid.getStore());\r
    },\r
\r
    onBeforeReconfigure: function(grid, store) {\r
        this.summaryRecord = null;\r
        \r
        if (store) {\r
            this.bindStore(grid, store);\r
        }\r
    },\r
\r
    bindStore: function(grid, store) {\r
        var me = this;\r
\r
        Ext.destroy(me.storeListeners);\r
        me.storeListeners = store.on({\r
            scope: me,\r
            destroyable: true,\r
            update: me.onStoreUpdate,\r
            datachanged: me.onStoreUpdate\r
        });\r
        \r
        me.callParent([grid, store]);\r
    },\r
\r
    renderSummaryRow: function(values, out, parent) {\r
        var view = values.view,\r
            me = view.findFeature('summary'),\r
            record, rows;\r
\r
        // If we get to here we won't be buffered\r
        if (!me.disabled && me.showSummaryRow) {\r
            record = me.summaryRecord;\r
\r
            out.push('<table cellpadding="0" cellspacing="0" class="' +  me.summaryItemCls + '" style="table-layout: fixed; width: 100%;">');\r
            me.outputSummaryRecord((record && record.isModel) ? record : me.createSummaryRecord(view), values, out, parent);\r
            out.push('</table>');\r
        }\r
    },\r
\r
    toggleSummaryRow: function(visible /* private */, fromLockingPartner) {\r
        var me = this,\r
            bar = me.summaryBar;\r
\r
        me.callParent([visible, fromLockingPartner]);\r
        if (bar) {\r
            bar.setVisible(me.showSummaryRow);\r
            me.onViewScroll();\r
        }\r
    },\r
\r
    getSummaryBar: function() {\r
        return this.summaryBar;\r
    },\r
\r
    vetoEvent: function(record, row, rowIndex, e) {\r
        return !e.getTarget(this.summaryRowSelector);\r
    },\r
\r
    onViewScroll: function() {\r
        this.summaryBar.setScrollX(this.view.getScrollX());\r
    },\r
\r
    onViewRefresh: function(view) {\r
        var me = this,\r
            record, row;\r
\r
        // Only add this listener if in buffered mode, if there are no rows then\r
        // we won't have anything rendered, so we need to push the row in here\r
        if (!me.disabled && me.showSummaryRow && !view.all.getCount()) {\r
            record = me.createSummaryRecord(view);\r
            row = Ext.fly(view.getNodeContainer()).createChild({\r
                tag: 'table',\r
                cellpadding: 0,\r
                cellspacing: 0,\r
                cls: me.summaryItemCls,\r
                style: 'table-layout: fixed; width: 100%'\r
            }, false, true);\r
            row.appendChild(Ext.fly(view.createRowElement(record, -1)).down(me.summaryRowSelector, true));\r
        }\r
    },\r
\r
    createSummaryRecord: function (view) {\r
        var me = this,\r
            columns = view.headerCt.getGridColumns(),\r
            remoteRoot = me.remoteRoot,\r
            summaryRecord = me.summaryRecord,\r
            colCount = columns.length, i, column,\r
            dataIndex, summaryValue, modelData;\r
\r
        if (!summaryRecord) {\r
            modelData = {\r
                id: view.id + '-summary-record'\r
            };\r
            summaryRecord = me.summaryRecord = new Ext.data.Model(modelData);\r
        }\r
\r
        // Set the summary field values\r
        summaryRecord.beginEdit();\r
\r
        if (remoteRoot) {\r
            summaryValue = me.generateSummaryData();\r
            \r
            if (summaryValue) {\r
                summaryRecord.set(summaryValue);\r
            }\r
        }\r
        else {\r
            for (i = 0; i < colCount; i++) {\r
                column = columns[i];\r
\r
                // In summary records, if there's no dataIndex, then the value in regular rows must come from a renderer.\r
                // We set the data value in using the column ID.\r
                dataIndex = column.dataIndex || column.getItemId();\r
\r
                // We need to capture this value because it could get overwritten when setting on the model if there\r
                // is a convert() method on the model.\r
                summaryValue = me.getSummary(view.store, column.summaryType, dataIndex);\r
                summaryRecord.set(dataIndex, summaryValue);\r
\r
                // Capture the columnId:value for the summaryRenderer in the summaryData object.\r
                me.setSummaryData(summaryRecord, column.getItemId(), summaryValue);\r
            }\r
        }\r
\r
        summaryRecord.endEdit(true);\r
        // It's not dirty\r
        summaryRecord.commit(true);\r
        summaryRecord.isSummary = true;\r
\r
        return summaryRecord;\r
    },\r
\r
    onStoreUpdate: function() {\r
        var me = this,\r
            view = me.view,\r
            selector = me.summaryRowSelector,\r
            dock = me.dock,\r
            record, newRowDom, oldRowDom, p;\r
\r
        if (!view.rendered) {\r
            return;\r
        }\r
\r
        record = me.createSummaryRecord(view);\r
        newRowDom = Ext.fly(view.createRowElement(record, -1)).down(selector, true);\r
\r
        if (!newRowDom) {\r
            return;\r
        }\r
\r
        // Summary row is inside the docked summaryBar Component\r
        if (dock) {\r
            p = me.summaryBar.item.dom.firstChild;\r
            oldRowDom = p.firstChild;\r
        }\r
        // Summary row is a regular row in a THEAD inside the View.\r
        // Downlinked through the summary record's ID\r
        else {\r
            oldRowDom = me.view.el.down(selector, true);\r
            \r
            // If the old row doesn't exist, it means that the store update we are\r
            // reacting to is a remove of the last row. So we will be appending\r
            // to the node container.\r
            p = oldRowDom ? oldRowDom.parentNode : view.getNodeContainer();\r
        }\r
\r
        if (p) {\r
            p.insertBefore(newRowDom, oldRowDom);\r
            if (oldRowDom) {\r
                p.removeChild(oldRowDom);\r
            }\r
        }\r
        // If docked, the updated row will need sizing because it's outside the View\r
        if (dock) {\r
            me.onColumnHeaderLayout();\r
        }\r
    },\r
\r
    // Synchronize column widths in the docked summary Component\r
    onColumnHeaderLayout: function() {\r
        var view = this.view,\r
            columns = view.headerCt.getVisibleGridColumns(),\r
            column,\r
            len = columns.length, i,\r
            summaryEl = this.summaryBar.el,\r
            el;\r
\r
        for (i = 0; i < len; i++) {\r
            column = columns[i];\r
            el = summaryEl.down(view.getCellSelector(column), true);\r
            if (el) {\r
                Ext.fly(el).setWidth(column.width || (column.lastBox ? column.lastBox.width : 100));\r
            }\r
        }\r
    },\r
\r
    destroy: function() {\r
        var me = this;\r
        me.summaryRecord = me.storeListeners = Ext.destroy(me.storeListeners);\r
        me.callParent();\r
    }\r
});\r
\r