PDA

View Full Version : GroupingView: Display group header like a standard row element.



ExTriqui
2 Sep 2010, 6:59 AM
Before I go any further in my tests, let me ask this here. Just in case the solution is really easy and I can't see it cause I'm very new to ExtJS.
I'm trying to display a grid with grouping but I want the header for every group to look like any other row.
I've been trying to copy the html generated into the headerGroupTpl, but it's a lot of code and some attributes are generated dinamically (like the column width). Now I'm trying to figure out if it's possible to call something like a modified GroupingView.doRender method to do that work for me, but haven't found any working solution yet.

Do you have any idea about how can this be done or if it is possible at all?

Condor
2 Sep 2010, 7:09 AM
It not that easy indeed. You should have a look at the GroupSummary plugin (it also renderers columns and keeps the widths in sync).

itsjstme
2 Sep 2010, 9:47 AM
getting error from firebug
Ext.grid.GroupingView.GROUP_ID=1000;

whats the problem here


var gStore = new Ext.data.GroupingStore({
url: '/project01/excell/detailsSummary.php',
reader: new Ext.data.JsonReader({
root: 'results',
fields: [
{name: 'id' , type: 'int' },
{name: 'account' , type: 'int' },
{name: 'ctype' , type: 'int' },
{name: 'name' , type: 'string' },
{name: 'currentData' , type: 'float' },
{name: 'currentComparison' , type: 'float' },
{name: 'projectData' , type: 'float' },
{name: 'projectComparison' , type: 'float' },
{name: 'futureData' , type: 'float' },
{name: 'futureComparison' , type: 'float' },
{name: 'percentageChange' , type: 'float' }
]
}),
sortInfo: {field: 'ctype', direction: 'ASC'},
remoteSort: true,
groupField : 'ctype'

});

gStore.load();

var grid1 = new Ext.grid.EditorGridPanel({

store: gStore,
cm: EditColumns,
sm: Checkbox1,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: ' Category {text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
width:1180,
height:465,
title: 'Grouping Example',
iconCls: 'icon-grid',

});

Condor
3 Sep 2010, 1:15 AM
That can't be the error! Use ext-all-debug.js and post a proper stacktrace of the error.