RowExpander and grid updates. How to keep rows expanded?

[mikhailt]

I use RowExpander plugin with a grid. Grid is sometimes updated.
I call store.load() to update the data and refresh the view.
Then all expanded rows are collapsed.

How to keep rows expanded after grid updates?

[mikhailt]

Is it possible to get all rows from the grid?
Read the row state "expanded/collapsed" and restore it after grid refresh, maybe.
Need help.

[daddie888]

Hi, if you don't need to be able to collapse you should use the rowbody feature..

[mikhailt]

I do not understand what you mean.
Any code examples?

[mikhailt]

Here is the solution i got from Sencha support. It works. Maybe someone else will need it. It is an override of RowExpander.

Ext.override(Ext.ux.RowExpander, {
    constructor: function() {
        this.callParent(arguments);
        var grid = this.getCmp();
        this.persist = [];
        this.recordsExpanded = {};
        // <debug>
        if (!this.rowBodyTpl) {
            Ext.Error.raise("The 'rowBodyTpl' config is required and is not defined.");
        }
        // </debug>
        // TODO: if XTemplate/Template receives a template as an arg, should
        // just return it back!
        var rowBodyTpl = Ext.create('Ext.XTemplate', this.rowBodyTpl),
            features = [{
                ftype: 'rowbody',
                columnId: this.getHeaderId(),
                recordsExpanded: this.recordsExpanded,
                rowBodyHiddenCls: this.rowBodyHiddenCls,
                rowCollapsedCls: this.rowCollapsedCls,
                getAdditionalData: this.getRowBodyFeatureData,
                getRowBodyContents: function(data) {
                    return rowBodyTpl.applyTemplate(data);
                }
            },{
                ftype: 'rowwrap'
            }];
 
        if (grid.features) {
            grid.features = features.concat(grid.features);
        } else {
            grid.features = features;
        }
 
        // NOTE: features have to be added before init (before Table.initComponent)
    },
    persistExpandedRows: function () {
        /**
          - make a copy of the array since its elements could change during the iteration
          - if the element is less than the number of rows in the grid then keep it expanded
          - else remove it from the persist array
        */
        Ext.Array.forEach(this.persist.concat(), function (v) {
            if (v < this.view.store.data.length) {
                this.toggleRow(v, true);
            } else {
                this.updateState(v);
            }
         }, this);
    },
    updateState: function (rowIndex, persist) {
        // if persisting expanded rows, only change this.persist from the this.persistExpandedRows() method not this.toggleRow()
        var persisted = this.persist;
        if (persist) {
            return;
        }
        if (!Ext.Array.contains(persisted, rowIndex)) {
            persisted.push(rowIndex);
        } else {
            Ext.Array.remove(persisted, rowIndex);
        }
    },
    toggleRow: function(rowIdx, persist) {
        var rowNode = this.view.getNode(rowIdx),
            row = Ext.get(rowNode),
            nextBd = Ext.get(row).down(this.rowBodyTrSelector),
            record = this.view.getRecord(rowNode),
            grid = this.getCmp(),
            rowIndex = rowNode.rowIndex - 1;
 
        if (row.hasCls(this.rowCollapsedCls)) {
            row.removeCls(this.rowCollapsedCls);
            nextBd.removeCls(this.rowBodyHiddenCls);
            this.updateState(rowIndex, persist);
            this.recordsExpanded[record.internalId] = true;
            this.view.fireEvent('expandbody', rowNode, record, nextBd.dom);
        } else if (!persist) { // interrupt the normal toggling if persisting
            row.addCls(this.rowCollapsedCls);
            nextBd.addCls(this.rowBodyHiddenCls);
            this.updateState(rowIndex, persist);
            this.recordsExpanded[record.internalId] = false;
            this.view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
        }
 
 
        // If Grid is auto-heighting itself, then perform a component layhout to accommodate the new height
        if (!grid.isFixedHeight()) {
            grid.doComponentLayout();
        }
        this.view.up('gridpanel').invalidateScroller();
    }
});