Ext JS 6.2.0 Classic how to control the scrollbar of Ext.grid.Panel?

Question

ExtJS/Sencha

Essence - I create a simple two-column grid, fill it with some data and get the absence of a scroll bar in certain situations.
For example, if the grid is assigned as the main view, everything is fine. Even if the storage receives 3-5 thousand records from the server, nothing slows down, irrelevant DOM elements are dynamically created / removed when scrolling, and everything works fine.
Sandbox example https://fiddle.sencha.com/#view/editor&fiddle/2b0h https://fiddle.sencha.com/#view/editor&fiddle/2b18 the table header crawls up and it is problematic to return it back
But if the grid is nested in any panel, then a completely different algorithm is obtained - the grid is created with a maximum height of at least 20000 pixels, while all elements are created at once DOM for each entry, without looking - there are three of them or three thousand, there is no scrollbar and everything slows down decently with a large data set.

. This can be fixed if you set the height for the grid to pixels, but if you try in percentage - nothing comes out. But setting the height in pixels in the age of adaptive layout is not at all the solution that we would like.
How to make the grid behave the same way both as the main view and in the nested state?

Answer 1

and again the sencha forum is out of competition! They helped to solve the issue almost instantly))
namely, in the section describing the central panel in which the grid is placed, you need to register layout: "fit" and remove the explicit setting of the height and width

{
        region:"center",
        collapsible:false,
        items: [{
            xtype: 'clientslist'
        }],
        layout: "fit",
}