Grid RowExpander plugin: expandOnlyOne, to auto collapse the last expanded row

RowExpander Addon: expandOnlyOne

It's just a little addon for RowExpander plugin which adds two features: the ability to only have one expanded row and to collapse the last expanded row.


Code:
GridPanel definition:
Ext.require([
     'Ext.data.*', 
'Ext.grid.*',
 'Ext.ux.RowExpanderPlus'
]);

Ext.define('MyApp.view.MyGridPane', {

extend : 'Ext.grid.Panel',

......
plugins: [{
            ptype: 'rowexpanderplus',
            selectRowOnExpand : true, //true to select a row when clicking on the expander icon
            expandOnDblClick: true, //true to toggle a row between expanded/collapsed when double clicked
            rowBodyTpl : [  ]

]}

.....
....

]);

ux/RowExpanderPlus.js
MVC pattern  : paste this js code in above path and declare in path  in loader.js \
General App :  import this js file path in your jsp

/**
 * @class Ext.ux.RowExpanderPlus
 * @extends Ext.ux.RowExpander
 * Plugin (ptype = 'rowexpanderplus') s just a little addon for 
 * {@link Ext.ux.RowExpander RowExpander} plugin which adds two features: 
 * the ability to only have one expanded row 
 * and to collapse the last expanded row.
 *
 * @ptype rowexpanderplus
 */
Ext.define('Ext.ux.RowExpanderPlus', {
    extend: 'Ext.ux.RowExpander',

    alias: 'plugin.rowexpanderplus',
    
    /**
     * @cfg {Boolean} expandOnlyOne
     * true to allow only one expanded row
     * (defaults to true).
     */
    expandOnlyOne: true,
    
    lastExpandedRowIdx: null,
    
    // Overwrite RowExpander.toggleRow(rowIdx)
    toggleRow: function(rowIdx) {
        var row = Ext.get(this.view.getNode(rowIdx));
        if (row.hasCls(this.rowCollapsedCls)) {
            if (this.lastExpandedRowIdx != null && this.expandOnlyOne == true) {
                this.collapseRow(this.lastExpandedRowIdx);
            }
            this.expandRow(rowIdx);
            this.lastExpandedRowIdx = rowIdx;
        } else {
            this.collapseRow(rowIdx);
            this.lastExpandedRowIdx = null;
        }
    },
    
    expandRow: function(rowIdx) {
        var view = this.view,
            rowNode = view.getNode(rowIdx),
            row = Ext.get(rowNode),
            nextBd = Ext.get(row).down(this.rowBodyTrSelector),
            record = view.getRecord(rowNode);

            row.removeCls(this.rowCollapsedCls);
            nextBd.removeCls(this.rowBodyHiddenCls);
            this.recordsExpanded[record.internalId] = true;
            view.refreshSize();
            view.fireEvent('expandbody', rowNode, record, nextBd.dom);
    },
    
    collapseRow: function(rowIdx) {
        var view = this.view,
            rowNode = view.getNode(rowIdx),
            row = Ext.get(rowNode),
            nextBd = Ext.get(row).down(this.rowBodyTrSelector),
            record = view.getRecord(rowNode);

            row.addCls(this.rowCollapsedCls);
            nextBd.addCls(this.rowBodyHiddenCls);
            this.recordsExpanded[record.internalId] = false;
            view.refreshSize();
            view.fireEvent('collapsebody', rowNode, record, nextBd.dom);
    },
    
    /**
     * @method
     * Collapse the last expanded row.
     */
    collapseLastRow: function() {
        this.collapseRow(this.lastExpandedRowIdx);
    }
    
});