View Full Version : First Group Element as Header

8 Jun 2012, 7:32 AM
I am trying to modify the grouping to display the first child as the group header rather than the group name, and then not have that child in the list of elements. Think the way email threads are usually displayed (see attached for simple image of it).

I have searched extensively and been unable to find any instances of this. I have coded a "working" solution, but it is extremely hackish and it seems to screw up the number of the rows (the ids of the rows do not necessarily correlate to the row text). My method was to break up the values object into its first item and rest of the items, then recurse separately on them in two portions of the template. But recurse obviously does some more complicated things, such that it breaks the system.

Has anyone done this?

Thanks. I will post my (broken) code below:

Ext.define('MyApp.ThreadGrouping', {
extend: 'Ext.grid.feature.Grouping',
alias: 'feature.threadgrouping',
eventSelector: '.' + Ext.baseCSSPrefix + 'grid-threadgroup-hd',
hdCollapsedCls: Ext.baseCSSPrefix + 'grid-threadgroup-hd-collapsed',

getFeatureTpl: function( values, parent, x, xcount) {
var me = this;

return [
'<tpl if="typeof rows !== \'undefined\'">',
'<tr class="' + Ext.baseCSSPrefix + 'grid-threadgroup-hd ' + (me.startCollapsed ? me.hdCollapsedCls : '') + ' {[this.singleCls(values)]} {addlSelector} {rowCls}" {rowAttr}><td colspan="' + parent.columns.length + '">{[this.recurse(this.firstr(values))]}</td>',

'<tr id="{viewId}-gp-{name}" class="' + Ext.baseCSSPrefix + 'grid-group-body ' + (me.startCollapsed ? me.collapsedCls : '') + ' {collapsedCls}"><td colspan="' + parent.columns.length + '">',
'<tpl if="this.hasMult(values)">',

getFragmentTpl: function() {
return Ext.apply(this.callParent(), {
firstr: Ext.bind(this.firstr,this),
restr: Ext.bind(this.restr,this),
columns: this.view.panel.columns,
hasMult: this.hasMult,
singleCls: this.singleCls
firstr: function(vals) {
var newvals = {};
if (newvals.rows.length > 0) {
newvals.rows = [vals.rows[0]];
return newvals;
restr: function(vals) {
var newvals = {};
newvals.rows = vals.rows.slice(1);
return newvals;
hasMult: function(vals) {
return vals.rows.length > 1;
singleCls: function(vals) {
return (vals.rows.length == 1 ? 'singleThread' : '');

10 Aug 2012, 12:56 PM
I have been working on the exact same thing for days. Have you found a solution?

10 Aug 2012, 2:25 PM
I have been working on the exact same thing for days. Have you found a solution?

I have hacked together a working solution. I am attaching a minimal solution, although for some reason the columns are being oddly centered (which isn't happening on my production version). I am fairly positive this will NOT work across version upgrades (running under 4.1), but feel free to use it as you will.