extjs rowexpander plugin: expand one row at time - extjs

Question

I'm using the RowExpander plugin with a nested grid in my app. I want to expand only one row at time so when I click on the '+' icon all the other rows have to collapse. How can I do that?

Answer 1

You should listen for the expandbody event of the rowexpander plugin, and keep track of the last expanded row. Whenever a new row is expanded use toggleRow to collapse the previously expanded row.
To toggle row:
grid.getPlugin( pluginId ).toggleRow(rowIndex)
To find if a row is collapsed (code adapted from RowExpander.js) - there may be a better way to do it..?
var rowExpander = grid.getPlugin( pluginId );
var rowNode = grid.getView().getNode(rowIdx);
var row = Ext.fly(rowNode, '_rowExpander');
var isCollapsed = row.hasCls(rowExpander.rowCollapsedCls);

Answer 2

For Ext 6.0.1 The following code might help you. I am happy to see if there are a more simple way of doing this.
var rowExpander = yourGrid.getPlugin('yourPluginId');
var expandedRecords = rowExpander.recordsExpanded;
var currentExpandedRecord;
var currentInternalId = 0; // start from 1
var currentIndex = -1; // start from 0
for(var prop in expandedRecords) {
if(expandedRecords.hasOwnProperty(prop)) {
// expandedRecords is storing internal id,
// and internal id start form 1 in Ext 6.0.1
currentInternalId = parseInt(prop, 10);
if(currentInternalId && expandedRecords[prop] === true) {
// extjs 6.0.1 store data index start from 0
currentExpandedRecord = yourGrid.store.getByInternalId(currentInternalId);
currentIndex = yourGrid.store.indexOf(currentExpandedRecord);
rowExpander.toggleRow(currentIndex, currentExpandedRecord);
}
}
}
rowExpander.toggleRow(index, record);