ExtJS Grid - 滚动在 bottom/in 网格中间显示大白色 space

Question

问题描述

我有一个支持分页的网格，其中包含 100 多页数据。页面大小 = 100 行。

即使在第 1 页，如果我将滚动框拖到网格底部，我也会在网格底部看到一个大的白色 space。

跳转到第 30 页，如果我将滚动框拖到网格底部，我会在网格底部看到一个大的白色 space。如果我在网格中上下拖动滚动框，我会看到网格中间也出现大的白色闪烁 space（很快就会被数据行覆盖）。

这不会为最终用户提供流畅的滚动体验。

图片显示large white space at the bottom

图片显示large white space in the middle

尝试过的 ExtJS 版本：7.4.0

重现问题的步骤：

这里是重现此问题的fiddle：https://fiddle.sencha.com/#view/editor&fiddle/3e98

(1)在第1页，如果将滚动框拖到网格底部，您会看到网格底部有一个大的白色space。

(2) 跳转到第30页，如果将滚动框拖到网格底部，就会看到网格底部有一个大白space。如果您在网格中上下拖动滚动框，您会看到网格中间也出现大的白色 space 闪烁（很快就会被数据行覆盖）。

有谁知道为什么会出现这个问题，以及如何解决这个问题？

谢谢。

Answer 1

对于可能具有不同高度的单元格的任何列，尝试将“variableRowHeight”设置为 true。

要修复您的示例，您可以在这些列中进行设置：

{
    text: 'CommandLineWithDisplayNames',
    dataIndex: 'CommandLineWithDisplayNames',
    flex: 3,
    variableRowHeight: true
},
{
    text: 'CommandLineWithNumbers',
    dataIndex: 'CommandLineWithNumbers',
    flex: 3,
    variableRowHeight: true
},

文档：https://docs.sencha.com/extjs/7.4.0/classic/Ext.grid.column.Column.html#cfg-variableRowHeight

ExtJS Grid - 滚动在 bottom/in 网格中间显示大白色 space

ExtJS Grid - scrolling shows large white space at the bottom/in the middle of grid

extjs

extjs7