Ext js 7 modern grid plugin RowExpander only certain rows

Question

I'm trien to use the RowExpander plugin for Ext js 7 modern grid.

I need the RowExpander only on a few rows, not on all.

I'm not sure how to achieve this, I searched for some examples but they are all for ext js 4.

I tried overriding

applyColumn: function(column, oldColumn) {
    console.log('override applyColumn:');
    console.log(column);
    return Ext.factory(Ext.apply({}, column), null, oldColumn);
},


    updateGrid: function(grid) {
        var me = this;
console.log('override test:');
console.log(grid);
        if (grid) {
            grid.hasRowExpander = true;
            grid.addCls(Ext.baseCSSPrefix + 'has-rowexpander');

            me.colInstance = grid.registerColumn(me.getColumn());
            grid.refreshScrollerSize();

            grid.element.on({
                tap: 'onGridTap',
                delegate: me.expanderSelector,
                scope: me
            });
        }
    },

But i cant "hook into a single row" when data is there.

Looking for something like this but for ext js 7 modern grid: How can I get the ExtJs RowExpander to only show the icon ([+]) on certain rows?

Answer 1

You can bind the 'hidden', something like this:

Ext.define('Ext.grid.plugin.CustomRowExpander', {
    extend: 'Ext.plugin.Abstract',

    requires: [
        'Ext.grid.cell.Expander'
    ],

    alias: 'plugin.customrowexpander',

    config: {
        grid: null,
        column: {
            weight: -1100,
            xtype: 'gridcolumn',
            align: 'center',
            text: '',
            width: 50,
            resizable: false,
            hideable: false,
            sortable: false,
            editable: false,
            ignore: true,
            ignoreExport: true,
            cell: {
                xtype: 'expandercell',
                hideMode: 'opacity',
                bind: {
                    hidden: '{record.expandable}'
                }
            },
            menuDisabled: true
        }
    },

    expanderSelector: '.' + Ext.baseCSSPrefix + 'expandercell .' + Ext.baseCSSPrefix + 'icon-el',

    init: function (grid) {
        grid.setVariableHeights(true);
        this.setGrid(grid);
    },

    destroy: function () {
        var grid = this.getGrid(),
            col = this.colInstance;

        if (col && !grid.destroying) {
            grid.unregisterColumn(col, true);
        }

        this.callParent();
    },

    applyColumn: function (column, oldColumn) {
        return Ext.factory(Ext.apply({}, column), null, oldColumn);
    },

    updateGrid: function (grid) {
        var me = this;

        if (grid) {
            grid.hasRowExpander = true;
            grid.addCls(Ext.baseCSSPrefix + 'has-rowexpander');

            me.colInstance = grid.registerColumn(me.getColumn());
            grid.refreshScrollerSize();

            grid.element.on({
                tap: 'onGridTap',
                delegate: me.expanderSelector,
                scope: me
            });
        }
    },

    onGridTap: function (e) {
        var cell = Ext.Component.from(e),
            row = cell.row;

        // May have tapped on a descendant grid row. We're only interested in our own.
        if (row.getGrid() === this.getGrid()) {
            row.toggleCollapsed();
        }
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var store = Ext.create('Ext.data.Store', {
            fields: ['fname', 'lname', 'talent', 'powers'],
            data: [{
                'fname': 'Barry',
                'lname': 'Allen',
                'talent': 'Speedster',
                'expandable': true
            }, {
                'fname': 'Oliver',
                'lname': 'Queen',
                'talent': 'Archery',
                'expandable': false
            }, {
                'fname': 'Kara',
                'lname': 'Zor-El',
                'talent': 'All',
                'expandable': true
            }, {
                'fname': 'Helena',
                'lname': 'Bertinelli',
                'talent': 'Weapons Expert',
                'expandable': false
            }, {
                'fname': 'Hal',
                'lname': 'Jordan',
                'talent': 'Willpower',
                'expandable': true
            }, ]
        });

        Ext.create('Ext.grid.Grid', {
            title: 'DC Personnel',
            store: store,
            plugins: {
                customrowexpander: true
            },
            itemConfig: {
                viewModel: true,
                body: {
                    tpl: '<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr..</div>'
                }
            },
            columns: [{
                text: 'First Name',
                dataIndex: 'fname',
                flex: 1
            }, {
                text: 'Last Name',
                dataIndex: 'lname',
                flex: 1
            }, {
                text: 'Talent',
                dataIndex: 'talent',
                flex: 1
            }],
            height: 400,
            layout: 'fit',
            fullscreen: true
        });

    }
});