ExtJS 6 TreePanel scrolling not working

I'm stuck trying to make my treepanel scrollable in both ways. Heres my code: https://fiddle.sencha.com/#fiddle/13cb

I could set scrollable: true in my wrapping panel, but this would not solve the horizontal scrolling problem. Furthermore with this approach the combobox scroll up too. But I want only the treepanel to scroll horizontally and vertically. How can I achieve that?

Thanks in advance

I am not sure whether we can achieve exactly what you want. But let's try.

To get the vertical scrollbars working, you have to define a height on the treepanel. As of now, the treepanel resizes dynamically to the height of its content, since no height was defined for it. Since even the parent panel has no height defined, giving the height as percent also won't work, but e.g. height:500 would. If you require the layout to float around when the browser window is resized, have a look at the vbox or border layouts for the parent panel.

To get the horizontal scrollbars working, you have to know how grid columns work. You have not defined a columns configuration, which makes the treepanel assume that you want a single column taking up 100% of the width of the treepanel:

   if (!me.columns) {
        if (me.initialConfig.hideHeaders === undefined) {
            me.hideHeaders = true;
        }
        me.addCls(me.autoWidthCls);
        me.columns = [{ // define columns configuration with a single column
            xtype    : 'treecolumn', // the column should be a treecolumn
            text     : 'Name',
            flex     : 1, // and take up 100% of the width of the panel
            dataIndex: me.displayField // and use the displayField as 
        }];
    }

You cannot make columns take up the width required by their content automatically. But you could e.g. listen to nodeexpand and nodecollapse events and call column.autoSize().