允许网格高度随行数变化(自动高度)

Question

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

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

我想要的是能够将高度设置为自动，并使网格高度适应网格中的行数。我们已经在旧版本的ExtJS中找到了这样做的方法，但我找不到版本7(现代(的解决方案。

有人能给我指正确的方向吗？

如果你想试试我的Sencha Fiddle。

Answer 1

这是一个Fiddle

关键功能是设置网格属性可滚动：真正的

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

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

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