ExtJS 6 plugin.rowwidget Resize row body component on grid resize

Question

I have a grid with Ext.grid.plugin.RowWidget. When grid is resized expanded row body components remains with origin width. How I can fix this issue?

As temporary solutio

Answer 1

Add an ID to the plugin:

{
    ptype: 'rowwidget',
    id: 'rowwidget',
    widget: {
        xtype: 'characterPanel',
        bind: {},
    }
}

then you can get the plugin by the given id:

grid.getPlugin('rowwidget');

This plugin holds a property which is called recordsExpanded. This contains all internalIds of the expanded records and the current state of the expansion aswell.

In your onResize-function you can do this:

let plugin = grid.getPlugin('rowwidget');
if (plugin && plugin.recordsExpanded) {
    for (let internalId in plugin.recordsExpanded) {
        let record = grid.store.getByInternalId(internalId);
        if (!Ext.isEmpty(record)) {
            plugin.getWidget(grid.getView(), record).setWidth('100%');
        }
    }
}

But you should add a delay (at least of 1) to the function call to ensure the resizing is done.

listeners: {
    resize: {
        delay: 1,
        fn: function() {
            // do stuff
        }
    }
}

Without the delay, the widget sometimes does not resize after making the row bigger.