Question

我有一个Ext.grid.plugin.RowWidget的网格。调整网格大小时，扩展的行主体组件保持原始宽度。我如何解决这个问题？

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

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

但对我来说这似乎是不好的解决方案。此外，它有一个问题 - 所有行主体组件调整其可见性的重新调整，如果许多折叠（展开后）行可能会影响我的应用程序的性能。

有什么想法吗？

以下simple fiddle说明了我的问题以及我已经尝试过的问题。

Answer 1

为插件添加ID：

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

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

grid.getPlugin('rowwidget');

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

在你的onResize函数中你可以这样做：

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）以确保调整大小。

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

没有延迟，小部件有时在行变大后不会调整大小。

Answer 2

要添加到@xhadon的answer，您还可以使用reference执行以下操作。这样一来，您将无需检查该插件是否存在或是否已扩展，因为它将是undefined并且该函数将返回。

视图控制器

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

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

    if (! rowWidget) {
        return
    }

    rowWidget.setWidth('100%');
}

查看

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

ExtJS 6 plugin.rowwidget在网格调整大小时调整行主体组件的大小

2 个答案:

视图控制器

查看