空网格单元格直到调整大小

Question

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

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

在调整大小之前查看浏览器的开发工具，我看到单元格如下所示，其中 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 中添加了一些关于虚拟商店的错误。我也为这样的问题创建了一个ticket，这是执行reload导致的。这里不仅单元格是空的，选择模型也坏了。

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

如果您点击 'load' 一切正常。如果您单击 'load and reload'，您将看到空单元格。单击 'reload'

相同

提示：您必须重新运行应用程序才能发现问题。如果一开始发生负载，它会工作，您无法重现问题。

我们通过添加以下替代解决了这个问题：

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

空网格单元格直到调整大小

Empty Grid Cells Until Resize

extjs