ExtJS 6 plugin.rowwidget Resize row body component

问题:

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 solution I added resize event handler as follows

            listeners: {
                resize: function (grid) {
                    Ext.each(grid.query('characterPanel'), function (rowBodyComponent) {
                        //if(rowBodyComponent.isVisible()) does not work
                        //rowBodyComponent.updateLayout(); does not work
                        rowBodyComponent.setWidth('100%');
                    });
                }
            }

but it seems bad solution for me. Also, it has an issue - all row body components resized regardess of its visibility and in case of many collapsed (after expand) rows may affect performance of my app.

Any ideas?

Here is simple fiddle illustrating my problem and what I've tried already.

回答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.