HydridSummary

[nbourdeau]

For the sake of sharing, I'm trying to make an HydridSummary feature for grids that will combine GroupingSummary and Summary (as currently they do not work together ...).

Here is the related premium post:

http://www.sencha.com/forum/showthre...Ext-4&p=712595

Any better idea / suggestion ??

Also, I've not addressed my event problem. I want to be able to catch for example the click event of a cell in the summary. I don't see where to plug in the view for catching these events ....

[mitchellsimoens]

In a race to beat us to fix the bug?

[nbourdeau]

In a race to beat us to fix the bug?

I'd rather say I need it to be fixed ASAP and I've got no real helping answer from you guys ...

[elilindner]

I would LOVE to have this functionality. Willing to sponsor it if someone know how to do it.

[darrenmb]

Hows the ".. race to beat us to fix the bug" going ?

[nbourdeau]

Don't know what sencha is up to... they don't have a public bug system to follow the status of issues.
For my part, I made an HybridSummary feature that works ok for me.
Here it is:

Ext.define('Progression.ux.grid.feature.HybridSummary', {


    extend: 'Ext.grid.feature.GroupingSummary',


    alias: 'feature.hybridsummary',


    showTotalSummaryRow: true, // Can be used to disable the "total" summary row


    attachEvents: function() {
        var me = this;
        me.callParent();
        // Listen to container events on the view to catch events not catched by standard events
        me.mon(me.view, {
            containerclick: me.handleEvent,
            containermousedown: me.handleEvent,
            containermouseup: me.handleEvent,
            containerdblclick: me.handleEvent,
            containercontextmenu: me.handleEvent,
            containermouseover: me.handleEvent,
            containermouseout: me.handleEvent,
            containerkeydown: me.handleEvent,
            scope: me
        });


        // Regexp to match group id and extact name !!
        me.groupIdRe = new RegExp(me.view.id + '-bd-(.+)');


    },


    handleEvent: function(view, e, eOpts) {
        var me = this;
        // Check if event matches target!
        var target = e.getTarget('.x-grid-row-summary', view.getTargetEl());
        if (target) {
            var cell = e.getTarget(view.cellSelector, target),
                cellIndex = cell ? cell.cellIndex : -1;
            if (cellIndex !== -1) {
                var header = view.headerCt.getGridColumns()[cellIndex];
                // We will pass summary data instead of record index to the processEvent function
                var group = me.getGroup(target);
                var summaryData = {isSummary: true};
                if (group) {
                    summaryData.group = group;
                    summaryData.data = me.summaryData[group.name][header.id];
                } else {
                    summaryData.data = me.totalSummaryData[header.id];
                }
                // Let the column process the event in a standard way !!! (see i.e. actioncolumn)
                return header.processEvent(e.type, view, cell, summaryData, cellIndex, e);
            }
        }
    },


    /**
     * Here we try to find the group based on the summary row element
     * @param el
     */
    getGroup: function(el) {
        var me = this;
        el = Ext.get(el);
        var prev = el.prev();
        var match = prev.id.match(me.groupIdRe);
        if (match) {
            var name = match[1];
            return me.view.store.getGroups(name); 
        }
        return false;
    },


    /**
     * Generate "total" summary data
     */
    getFragmentTpl: function() {
        var me = this,
            fragments = me.callParent();


        if (this.showTotalSummaryRow) {
            me.totalSummaryData = Ext.grid.feature.Summary.prototype.generateSummaryData.call(this);
        }
        return fragments;
    },


    /**
     * Put the closeRows member functions in the template scope.
     */
    getTableFragments: Ext.grid.feature.Summary.prototype.getTableFragments,


    /**
     * Print the total summary row if not rendering a group.
     * This prevents generating a total summary row for each group since the groupîng fetaure uses recursion ...
     * When rendering a group, the name of the group is in the scope ...
     */
    closeRows: function() {
        return '</tpl><tpl if="!name">{[this.printSummaryRow()]}</tpl>';
    },


    /**
     * Override to get data for total summary row.
     * @param index
     */
    getPrintData: function(index){
        // GroupingSummary provides an index
        if (typeof index != 'undefined') {
            return this.callParent(arguments);
        } else if (this.showTotalSummaryRow) {
            // Get the data from the "total" summary ... (basically copied from the summary feature ...)
            var me = this,
                columns = me.view.headerCt.getColumnsForTpl(),
                i = 0,
                length = columns.length,
                data = [],
                active = me.totalSummaryData,  // Here is the modification (would be great to juste override this ...)
                column;


            for (; i < length; ++i) {
                column = columns[i];
                column.gridSummaryValue = this.getColumnValue(column, active);
                data.push(column);
            }
            return data;
        }
    }


});

I also use this css rule:

.x-grid-row-summary .x-grid-cell {
border-top: solid 1px #555;
}

[darrenmb]

We have a winner and its not Sencha !

Works like a charm; many thanks nbourdeau.