PDA

View Full Version : HydridSummary



nbourdeau
10 Jan 2012, 2:00 PM
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/showthread.php?160799-HybridSummary-in-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
11 Jan 2012, 8:41 AM
In a race to beat us to fix the bug? :)

nbourdeau
11 Jan 2012, 8:52 AM
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
12 Mar 2012, 1:56 PM
I would LOVE to have this functionality. Willing to sponsor it if someone know how to do it.

darrenmb
7 Nov 2012, 7:57 PM
Hows the ".. race to beat us to fix the bug" going ?

nbourdeau
8 Nov 2012, 5:32 AM
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
8 Nov 2012, 9:03 PM
We have a winner and its not Sencha !

Works like a charm; many thanks nbourdeau.