View Full Version : GroupingView - rowIndex

12 Apr 2013, 11:06 AM
I have two grids rendering off of the same Store, and both support the GroupingView.

What I am looking to know, is if the user clicks on a group header in the first grid it will toggle the group to show/hide it which is perfect. What I need to know, is how to get the necessary information so that I can tell the second grid to toggle the same group.

I understand how to relayEvents, and what not. My problem is I simply can not find in the API/Docs an attribute that would allow me to identify a meaning piece of data that I can then tell the second grid to toggle the group in question.


15 Apr 2013, 8:01 AM
Extend the groupingview and fire an event in the toggleGroup or other method so that you can capture it and handle the logic on the other grid.

16 Apr 2013, 10:21 AM
I've looked at doing that, but the problem is there doesn't seem to be a group index that I can reference. At least, not that I can see.

I appreciate the suggestion, I'll investigate it further but the correlation between the group being toggled and something that can be correlated in the other grid is alluding me currently.

19 Apr 2013, 9:50 AM
I have implemented a solution to my problem. I have overridden the initTemplates function in the Ext.grid.GroupingView so that the starting group template now outputs an attribute indicating the rowIndex of the record responsible for triggering this grouping.

this.startGroup = new Ext.XTemplate(
'<div id="{groupId}" class="x-grid-group {cls}">',
'<div id="{groupId}-hd" rowIndex="{startRow}" class="x-grid-group-hd ',
this.groupTemplateOverride ? 'x-grid-group-hd-override"' : '"', 'style="{style}">
<div class="x-grid-group-title"> ', this.groupTextTpl ,'</div>
' <div id="{groupId}-bd" class="x-grid-group-body">'

The change is simply the rowIndex="{startRow}", the {startRow} is an available attribute. now when the toggleGroup method is executed, I fire a custom 'groupToggled' event that also passes the value of this rowIndex value.

The toggleGroup method now looks like

toggleGroup : function(group, expanded) {
var gel = Ext.get(group);
var rowIndex;

if( group && group.firstChild) {
rowIndex = group.firstChild.attributes['rowindex'].value;

expanded = Ext.isDefined(expanded) ? expanded : gel.hasClass('x-grid-group-collapsed');

if(this.state[gel.id] !== expanded){
if (this.cancelEditOnToggle !== false) {

this.state[gel.id] = expanded;
gel[expanded ? 'removeClass' : 'addClass']('x-grid-group-collapsed');

//my custom event
this.fireEvent('groupToggled', group, expanded, (rowIndex ? rowIndex : null));},

In the other grid, it listens for this event and calls the .getView().toggleRowIndex(rowIndex); method which achieves my desired outcome.