在调整大小之前清空网格单元格

Question

我正在使用 ExtJS 7.3.1，并且我有一个网格绑定到一个带有 REST 代理的虚拟商店。单元格值映射到加载到存储中的模型的属性。 AFAIK 这里没什么特别的。

我发现当我加载视图时，它会从 API 中提取数据并按预期将行添加到网格中，但单元格是空的。但是，当我调整窗口大小和网格大小时，单元格会被正确填充。

在调整大小之前查看浏览器的开发工具，我看到单元格如下所示，其中 x-body-el 的内容是   而不是模型属性中的值。

<div data-componentid="ext-gridcell-10" class="x-gridcell x-widthed x-align-left" data-xid="101" id="ext-gridcell-10" tabindex="-1" style="width: 473.688px;">
  <div data-qoverflow="true" class="x-body-el x-gridcell-body-el" id="ext-element-326">
    &nbsp;
  </div>
</div>

调整大小后，  被模型中的正确值替换。

真的很奇怪。也许是一个错误？

Answer 1

不幸的是，在 ExtJS 7.3 中添加了一些关于虚拟商店的错误。我还为这样的问题创建了一张票，这是由执行重新加载引起的。这里不仅单元格是空的，选择模型也被破坏了。

我为此创建了一个小提琴（可能是同样的问题）： https://fiddle.sencha.com/#fiddle/3c0u

如果您单击“加载”，一切正常。 如果单击“加载并重新加载”，您将获得空单元格。 点击“重新加载”也是如此

提示：您必须重新运行应用程序才能看到问题。如果一开始发生负载，它将起作用，并且您无法重现该问题。

我们通过添加以下覆盖暂时解决了这个问题：

Ext.define('X.override.data.virtual.Store', {
    override: 'Ext.data.virtual.Store',

    privates: {
        handleReload: function (op) {
            var me = this,
                activeRanges = me.activeRanges,
                len = activeRanges.length,
                pageMap = me.pageMap,
                resultSet = op.getResultSet(),
                wasSuccessful = op.wasSuccessful(),
                pageNumber = op.config && op.config.page,
                rsRecords = [],
                i, range, page;

            if (wasSuccessful) {
                me.readTotalCount(resultSet);

                // Condition for a valid page
                if (me.pageMap.getPageCount() !== 0 && pageNumber) {
                    page = me.pageMap.getPage(pageNumber - 1, false);

                    if (page && !(page.error = op.getError())) {
                        // Filling the page with records loaded from the operation
                        // and marking the page as loaded
                        page.records = op.getRecords();
                        page.state = 'loaded';
                    }
                }

                me.fireEvent('reload', me, op);

                for (i = 0; i < len; ++i) {
                    range = activeRanges[i];

                    if (pageMap.canSatisfy(range)) {
                         range.reload();
                    }
                }
                // override start

                // This fixes the problem, that first page entries are displayed as empty rows
                // and the selection model not working after reload.
                // With this override, the page will be handled like in a load.
                // This is only called for the active page, since the others are loaded normally over load.
                // Has to be placed after range.reload(). Otherwise the selection will break (only works if both exist).
                // Issue EXTJS-29428
                if (pageMap && page) {
                    pageMap.onPageLoad(page);
                }
                // override end
            }

            if (resultSet) {
                rsRecords = resultSet.records;
            }

            me.fireEvent('load', me, rsRecords, wasSuccessful, op);
        }
    }
});