ExtJS6 : How to keep the Tree scrollbar even when layout:fit?
<p>I have a TreePanel I want to have a vertical scroll:</p>

<pre><code>var layerTree = Ext.create('Ext.tree.Panel', {
    store: layerStore,
    xtype: 'tree-grid',
    scrollable: true,
    scroll: 'both',
    height: 410,
    width: 300,
    ......
});
</code></pre>

<p>But it is sharing another panel that I want to keep in the bottom of the container (will show the clicked node details).</p>

<p>My problem is: If I keep the height of the Tree, I have the scroll but it will be fixed and my detail panel will have a lot of space at bottom.</p>

<p>If I remove the fixed height of the tree and set it to <code>layout:'fit'</code> and <code>region:'center'</code> with my detail panel as <code>region:'south'</code> I can have a better distribution but the tree loses its vertical scroll...</p>

<p>How can I solve this?</p>

<p><a href="https://i.stack.imgur.com/3JVcb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3JVcb.png" alt="enter image description here"></a></p>

<p><strong>EDIT: The code I can't fiddle (because I'm a noob).</strong></p>

<pre><code>var treeData = '[{"layerAlias":"IBGE","serviceUrl":"","index":0,"description":"Descrição Teste","cls":"","leaf":false,"checked":false,"institute":"","id":"26","text":"IBGE","layerName":"","idNodeParent":0,"originalServiceUrl":""},{"layerAlias":"OSM","serviceUrl":"","index":1,"description":"Descrição Teste","cls":"","leaf":false,"checked":false,"institute":"","id":"27","text":"OSM","layerName":"","idNodeParent":0,"originalServiceUrl":""}]';

Ext.application({
    name : 'Fiddle',

    launch : function() {

        var layerTree = Ext.create('Ext.tree.Panel', {

            xtype: 'tree-grid',
            columns: [{
                xtype: 'treecolumn', 
                text: 'Nome',
                dataIndex: 'text',
                flex: 2,
                sortable: true
            }, {
                text: 'Origem',
                dataIndex: 'institute',
                flex: 1,
                sortable: true,
                align: 'left'
            }],     
            rootVisible: false,
            viewConfig: {
                plugins: {
                    ptype: 'treeviewdragdrop',
                }
            },

            scrollable: true,
            scroll: 'both',
            height: 410,
            width: 300,
            useArrows: true,
            border:false,
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Expandir',

                }, {
                    text: 'Recolher',

                }]
            }],
            listeners: {
                //itemclick: layerTreeItemClick
            }

        });        

        var layerDetailStore = Ext.create('Ext.data.Store', {
            requires: ['Ext.data.proxy.Memory'],
            fields: [{name: 'layerAlias'},{name: 'description'},{name: 'layerName'},{name: 'serviceUrl'},{name: 'institute'} ], 
            proxy: { type: 'memory' }
        });        

        var layerGridDetails = Ext.create('Ext.grid.Panel',{
            border:false,
            store:layerDetailStore,
            region:'center',

            columns: [{
                cellWrap: true,
                flex: 1,
                sortable: false,
                hideable: false,
                xtype: 'templatecolumn',
                tpl: [
                    '&lt;tpl for="."&gt;',
                            '&lt;div style="float: left; width: 95%; padding:0px;"&gt;',
                                '&lt;div style="font-weight:bold;padding: 0px 0px 5px 0px;"&gt;{layerAlias}&lt;/div&gt;',
                                '&lt;div style="font-weight:bold;padding: 0px;"&gt;{institute}&lt;/div&gt;',
                                '&lt;div style=" padding: 0px;"&gt;{layerName}&lt;/div&gt;',
                                '&lt;div style=" padding: 0px;"&gt;{serviceUrl}&lt;/div&gt;',
                                '&lt;div style=" padding: 0px;"&gt;{description}&lt;/div&gt;',
                            '&lt;/div&gt;',
                     '&lt;/tpl&gt;'
                    ]
            }],
        });        

        var treePanelHolder = Ext.create('Ext.Panel',{
            region:'north',

            border:false,

        });        

        Ext.create('Ext.Panel',{
            title: 'Layers',
            renderTo:Ext.getBody(),
            layout: 'border',

            height:500,
            width: 300,
            minWidth: 100,
            maxWidth: 300,

            items : [treePanelHolder, layerGridDetails]
        });        



    }
});
</code></pre>