PDA

View Full Version : [FIXED] Grid groupingsummary and summary together



Gerrat
30 May 2011, 7:30 AM
I'd like a grouped grid, with subtotals, and (grand) totals at the bottom.

If you take the Group Summary example (http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/group-summary-grid.html) and adding the summary feature (from http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.feature.Summary by just adding { ftype: 'summary' } to the features in the javascript for that example (http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/group-summary-grid.js) it doubles up the summary lines.

Adding a summary to the bottom of a grid shouldn't affect the grouping. Is there a way to get these grid features to play nice with eachother?

26337

AgomirMUB
19 Jul 2011, 8:14 AM
I have exactly the same problem. I can't use Summary and GroupingSummary together.
Thank you.

Qanik
19 Jul 2011, 10:40 PM
http://www.sencha.com/forum/showthread.php?135442-Ext.grid.feature.Summary-amp-amp-Ext.grid.feature.Grouping

SebTardif
20 Jul 2011, 3:58 AM
+1

I think fixing it should include a new official Grid example showing it works. Usually, when there is no example of something, that doesn't work out of the box.

AgomirMUB
26 Jul 2011, 1:40 AM
Now I use this workaround:
Override the generateSummaryData method of Ext.grid.feature.GroupingSummary like this:



generateSummaryData: function(){
//##### This is the piece of code of Ext.grid.feature.Summary
var me_MUB = this,
data_MUB = {},
store_MUB = me_MUB.view.store,
columns_MUB = me_MUB.view.headerCt.getColumnsForTpl(),
i_MUB = 0,
length_MUB = columns_MUB.length,
fieldData_MUB,
key_MUB,
comp_MUB;

for (i_MUB = 0, length_MUB = columns_MUB.length; i_MUB < length_MUB; ++i_MUB) {
comp_MUB = Ext.getCmp(columns_MUB[i_MUB].id);
data_MUB[i_MUB] = me_MUB.getSummary(store_MUB, comp_MUB.summaryType, comp_MUB.dataIndex, false);
//alert(comp_MUB.id +"-"+data_MUB[comp_MUB.id]);
}
//##### End code Summary

var me = this,
data = {},
remoteData = {},
store = me.view.store,
groupField = this.getGroupField(),
reader = store.proxy.reader,
groups = me.summaryGroups,
columns = me.view.headerCt.getColumnsForTpl(),
i,
length,
fieldData,
root,
key,
comp;

for (i = 0, length = groups.length; i < length; ++i) {
data[groups[i].name] = {};
}


if (me.remoteRoot && reader.rawData) {

root = reader.root;
reader.root = me.remoteRoot;
reader.buildExtractors(true);
Ext.Array.each(reader.getRoot(reader.rawData), function(value) {
data[value[groupField]] = value;
data[value[groupField]]._remote = true;
});

reader.root = root;
reader.buildExtractors(true);
}

for (i = 0, length = columns.length; i < length; ++i) {
comp = Ext.getCmp(columns[i].id);
fieldData = me.getSummary(store, comp.summaryType, comp.dataIndex, true);

for (key in fieldData) {
if (fieldData.hasOwnProperty(key)) {
if (!data[key]._remote) {
//data[key][comp.dataIndex] = fieldData[key];
//### Print the partial / total
data[key][comp.dataIndex] = fieldData[key]+"/"+data_MUB[i];
}
}
}
}
return data;
}
and use only the GroupingSummary feature in the grid.

The result is this:
27140

yyogev
1 Jan 2012, 7:35 AM
http://www.sencha.com/forum/showthread.php?135442-Ext.grid.feature.Summary-amp-amp-Ext.grid.feature.Grouping

Thanks! That did the trick.

Solovyevk
13 Feb 2012, 3:07 PM
I combined Ext.grid.feature.GroupingSummary with Ext.grid.feature.Summary to show grand total
at the bottom. Not very elegant solution, but it works. See screen shot attached.


Ext.define('WFP.view.component.GroupingSummaryWithTotal', {
extend: 'Ext.grid.feature.GroupingSummary',
alias: 'feature.groupingsummarytotal',
getTableFragments: function () {
return {
closeRows: this.closeRows
};
},
closeRows: function () {
return '</tpl>{[this.recursiveCall ? "" : this.printTotalRow()]}';
},
getFragmentTpl: function () {
var me = this,
fragments = me.callParent();
me.totalData = this.generateTotalData();
Ext.apply(fragments, {
printTotalRow: Ext.bind(this.printTotalRow, this)
});
Ext.apply(fragments, {
recurse: function (values, reference) {
this.recursiveCall = true;
var returnValue = this.apply(reference ? values[reference] : values);
this.recursiveCall = false;
return returnValue;
}
});
return fragments;
},
printTotalRow: function () {
var inner = this.view.getTableChunker().metaRowTpl.join(''),
prefix = Ext.baseCSSPrefix;
inner = inner.replace(prefix + 'grid-row', prefix + 'grid-row-summary');
inner = inner.replace('{{id}}', '{gridSummaryValue}');
inner = inner.replace(this.nestedIdRe, '{id$1}');
inner = inner.replace('{[this.embedRowCls()]}', '{rowCls}');
inner = inner.replace('{[this.embedRowAttr()]}', '{rowAttr}');
inner = Ext.create('Ext.XTemplate', inner, {
firstOrLastCls: Ext.view.TableChunker.firstOrLastCls
});
return inner.applyTemplate({
columns: this.getTotalData()
});
},
getTotalData: function () {
var me = this,
columns = me.view.headerCt.getColumnsForTpl(),
i = 0,
length = columns.length,
data = [],
active = me.totalData,
column;
for (; i < length; ++i) {
column = columns[i];
column.gridSummaryValue = this.getColumnValue(column, active);
data.push(column);
}
return data;
},
generateTotalData: function () {
var me = this,
data = {},
store = me.view.store,
columns = me.view.headerCt.getColumnsForTpl(),
i = 0,
length = columns.length,
fieldData,
key,
comp;
for (i = 0, length = columns.length; i < length; ++i) {
comp = Ext.getCmp(columns[i].id);
data[comp.id] = me.getSummary(store, comp.summaryType, comp.dataIndex, false);
}
return data;
}
});

iplanit
1 Oct 2012, 1:04 AM
I can confirm that is still happening using SA and extjs from cachefly in a 4.1 ExtJS project.

Also, If you enable the summary row by default it is not working and you have to tick and untick the box to display totals by default.

After deselecting show in groups it works.

The order in which you put the components in SA affects how it behaves.

There is a post I put with a video and some code about this bug.

Regards


I'd like a grouped grid, with subtotals, and (grand) totals at the bottom.

If you take the Group Summary example (http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/group-summary-grid.html) and adding the summary feature (from http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.feature.Summary by just adding { ftype: 'summary' } to the features in the javascript for that example (http://dev.sencha.com/deploy/ext-4.0.1/examples/grid/group-summary-grid.js) it doubles up the summary lines.

Adding a summary to the bottom of a grid shouldn't affect the grouping. Is there a way to get these grid features to play nice with eachother?

26337