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

Question

我正在 ExtJS 7.0.0（现代）中实现一个网格，并希望将网格的高度设置为其包含的行数。正如您在 ExtJS Kitchen Sink 上的 example 中看到的那样，网格的高度设置为 400，并且必须滚动网格才能看到其余的行。

Screenshot of the grid that must be scrolled to view all the rows

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

谁能给我指出正确的方向？

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

Answer 1

这是一个Fiddle

主要功能是设置网格属性可滚动：true

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

编辑：New Fiddle 使用 vbox 布局并在网格上将 infinite 设置为 false。在你的 fiddle 上，只需删除 height:300 属性并添加 infinite: false

Answer 2

原生方式：

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

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

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

Allow grid height to change with number of rows (autoheight)

extjs

extjs7