ExtJS Grid - 滚动显示网格底部/中间的大空白

如何解决ExtJS Grid - 滚动显示网格底部/中间的大空白

问题描述

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

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

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

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

图片显示large white space at the bottom

图片显示large white space in the middle

ExtJS 版本尝试：7.4.0

重现问题的步骤：

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

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

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

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

谢谢。

解决方法

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

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

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

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