Ext js 7 modern grid plugin RowExpander only certain rows - extjs

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