ExtJS 6 plugin.rowwidget 在网格调整大小时调整行体组件的大小 [英] ExtJS 6 plugin.rowwidget Resize row body component on grid resize

问题描述

我有一个带有 Ext 的网格.grid.plugin.RowWidget.当网格调整大小时，展开的行主体组件保持原点宽度.我该如何解决这个问题?

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?

作为临时解决方案，我添加了 resize 事件处理程序，如下所示

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.

有什么想法吗?

这是简单的小提琴，说明了我的问题和我所遇到的已经试过了.

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

推荐答案

为插件添加 ID:

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

然后你可以通过给定的id获取插件:

then you can get the plugin by the given id:

grid.getPlugin('rowwidget');

这个插件拥有一个名为 recordsExpanded 的属性.这包含扩展记录的所有internalIds以及扩展的当前状态.

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.

在您的 onResize 函数中，您可以这样做:

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

但是您应该向函数调用添加延迟(至少为 1)以确保完成调整大小.

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.

这篇关于ExtJS 6 plugin.rowwidget 在网格调整大小时调整行体组件的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！