extjs - 允许网格高度随行数变化（自动高度）

Question

我正在 ExtJS 7.0.0 (Modern) 中实现一个网格，并希望将网格的高度设置为它包含的行数。正如您在 ExtJS Kitchen Sink 上的示例中看到的，网格的高度设置为 400，并且必须滚动网格才能看到其余的行。

必须滚动才能查看所有行的网格屏幕截图

我正在寻找的是能够将高度设置为自动并使网格高度适应网格中的行数。我们已经找到了一种在旧版本的 ExtJS 中执行此操作的方法，但是我找不到版本 7（现代）的解决方案。

谁能在这里指出我正确的方向？

如果你想试一试，看看我的Sencha Fiddle 。

Answer 1

这是一个小提琴

关键特性是设置网格属性 scrollable: true

面板布局设置为 vbox。
我将 maxHeight 设置为 400，因此网格的高度为 400 像素，但您不能设置 maxHeight 属性并设置 flex: 1 并且网格将垂直占用所有可用空间，并且余额将是可滚动的。

编辑：新小提琴使用 vbox 布局并在网格上将无限设置为 false。在您的小提琴上，只需删除 height:300 属性并添加无限：false

Answer 2

1. 原生方式：

let grid = Ext.getCmp('example-grid-id'); //get your grid component, there are few ways to do this. "getCmp" is one of those ways
let gridHeightHeader = grid.renderElement.dom.getElementsByClassName("x-headercontainer")[0].offsetHeight;
let gridHeightBody   = 0;
let rows = grid.renderElement.dom.getElementsByClassName("x-listitem");
Array.from(rows).forEach(function(row){
    gridHeightBody+=row.offsetHeight; // in pixel, you can console log here
});
grid.setHeight(gridHeightHeader+gridHeightBody+40); // set new dynamic height of the grid + 40 as additional height

2. Sencha Ext JS方式：

{
    xtype : "panel", //parent of grid component
    fullscreen: true, //optional
    layout:"fit", //HERE is the key
    items:{
        xtype:'grid',
        // height: you don't need this height prop again :)
    }
}