CODEWITHSUNDEEP
extjsgridrow
andyts93
andyts93

Reputation: 347

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?

Upvotes: 1

Views: 6125

Answers (2)

Tim Hong
Tim Hong

Reputation: 2764

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

Upvotes: 1

Amit Aviv
Amit Aviv

Reputation: 1816

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

Upvotes: 3

Related Questions