Search code examples
extjsgridrow

extjs rowexpander plugin: expand one row at time

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?

Solution

  • 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);