Question

I am migrating an application from ExtJS 3.x to v4 and have been having some troubles with the TabPanel’s now that the “autoHeight” property has been removed. I know that if you do not explicitly define a height for the panel it is assumed to be “auto height”, but that is only true to a degree.

In ExtJS4, a tab panel with no height set will still have inline css height values set on the tab panel’s containing divs, and those heights are calculated from the initial height of each tab item’s content. And yes, if you update the height of any child components of the tab items, the height of the tab will be recalculated to fit it, or if the tab contains raw HTML and the tab’s update() method is used to change that content, its height again, will be adjusted to fit.

Where the issue is, in my application anyway, is that I update the raw HTML content of those tab’s using methods other than those in ExtJS’s framework, such as jQuery.html(). Since the tab panel is not being notified of this change to the content, it does not recalculate the height value of the tab.

To get around this all I want to do is ensure that the tab panel’s containing elements always are set to height:auto when rendered, re-rendered, or anything else. I’m assuming to accomplish this I would need to extend the TabPanel, but i don not know where to start as far as what methods to override, ect. Any thoughts?

Answer 1

This is what I ended up doing. It’s definitely not ideal, pretty hacky but it seems to work ok. Maybe someone will better see what I’m try to accomplish now, and can come up with a better implementation 🙂

Ext.define('Ext.tab.AutoHeightPanel', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.autoheighttabs',

    constructor: function(cnfg){
        this.callParent(arguments);
        this.initConfig(cnfg);
        this.on('afterlayout', this.forceAutoHeight, this);
        this.on('afterrender', this.forceAutoHeight, this);
        this.on('resize', this.forceAutoHeight, this);
    },

    forceAutoHeight: function(){
        this.getEl().applyStyles({height : 'auto', overflow : 'visible'});
        this.items.each(function(item, idx, len) {
            if(Ext.isDefined(item.getEl())) item.getEl().applyStyles({height : 'auto', overflow : 'visible'});
        });
    }
});  

You may want to add a ‘margin-bottom’ value to the style config of your tab panel to prevent content from butting up against the bottom of the panel.