extjstreepanel

Ext.tree.Panel automatic height in ExtJS 4


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


Solution

  • 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);
    }