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.

Answer 2

To add to @xhadon's answer, you can also do the following using a reference. Whereby you won't need to check if the plugin exists or it's expanded, since it'll be undefined and the function will return.

View Controller

listen: {
    component: {
        '#my-grid': {
            resize: 'onResize'
        }
    }
},

onResize: function() {
    const me = this,
        rowWidget = me.getView().lookup('rowWidget');

    if (! rowWidget) {
        return
    }

    rowWidget.setWidth('100%');
}

View

plugins: {
    rowwidget: {
        widget: {
            xtype: 'myrowwidget',
            reference: 'rowWidget',
            bind: {
                store: '{record.children}'
            }
        }
    }
}