Question

This was pretty easy to do in 3.x, simply by setting the “autoHeight” property of the TabPanel and the same for its children items via the “defaults” config. However it I have yet to seen a way to accomplish this in 4.x. The tabs do size to fit the initial height of their contents, however if the height of that content changes for any reason after init, the tab content is hidden/scrolled.

I did some searching already and in sencha’s official forums about this subject the most commonly suggested solution was to configure the tabpanel’s parent container’s layout as “fit”, setting align to “stretch, ect. However in my case, the TabPanel is not a child of another Ext component, it is “renderTo”‘ed a straight non-ext generated that sits somewhere in the body of my page, so these solutions wouldn’t apply.

Any ideas?

Answer 1

This was my solution in case any one was interested: 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.