Question

How do I create Ext.tree.Panel that automatically resizes to fit its content when nodes are expanded/collapsed?

Answer 1

It’s a bit of a dirty workaround, but as a quick solution works fine for me.

var tree = Ext.create('Ext.tree.Panel', {
    //...    
    //configuration goes here
    //...
    animate: false,
    //...
    listeners:{
        load: function(){
            resetHeight(this);
        },
        itemexpand: function(){
            resetHeight(this);
        },
        itemcollapse: function(){
            resetHeight(this);
        }
    }
}

function resetHeight(cmp){
    setTimeout(function(){
        var innerElement = cmp.getEl().down('table.x-grid-table');
        if(innerElement){
            var height = innerElement.getHeight();
            cmp.setHeight(height);
        }
    }, 200);
}