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屋！