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

Question

I'm implementing a grid in ExtJS 7.0.0 (Modern) and would like the height of the grid to be set to the number of rows that it contains. As you can see from the example on the ExtJS Kitchen Sink the height of the grid is set to 400 and the grid must be scrolled to see the rest of the rows.

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

What I am looking for is to be able to set the height to auto and have the grid height adapt to suit the number of rows in the grid. We have found a way to do this in older versions of ExtJS however I can't find a solution to this for version 7 (Modern).

Can anyone point me in the right direction here?

Take a look at my Sencha Fiddle if you want to have a go.

Answer 1

Here is a Fiddle

The key feature is setting grid property scrollable: true

The panel layout is set to vbox.
I set the maxHeight to 400 so the grid will be 400 pixels high but you can not set the maxHeight property and set flex: 1 and the grid will take up all the space vertically that is available and the balance will be scrolltable.

EDIT: New Fiddle Use a vbox layout and set infinite to false on the grid. On your fiddle just remove the height:300 property and add infinite: false

Answer 2

1. Native way:

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 way:

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