ExtJS 6 plugin.rowwidget 在網格調整大小時調整行主體組件的大小

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

但這對我來說似乎是糟糕的解決方案。 此外，它有一個問題 - 所有行主體組件都根據其可見性調整了大小，並且在許多折疊（展開后）行的情況下可能會影響我的應用程序的性能。

有任何想法嗎？

這是說明我的問題和我已經嘗試過的簡單小提琴。

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 的回答中，您還可以使用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}'
            }
        }
    }
}