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.
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
