ExtJS4 - Estendere Ext.tab.Panel per evitare l'impostazione di valori di altezza

Question

sto migrando un'applicazione da ExtJS 3.x alla v4 e stanno avendo alcuni problemi con il TabPanel di ora che la proprietà "autoHeight" è stata rimossa. So che se non si definisce in modo esplicito l'altezza per il pannello si presume di essere "all'altezza auto", ma questo è vero solo in misura.

In ExtJS4, un pannello a schede con alcun set altezza avrà ancora valori di altezza linea css impostati div contenitore del pannello scheda, e quelle altezze sono calcolati l'altezza iniziale del contenuto di ciascun elemento tab. E sì, se si aggiorna l'altezza di eventuali componenti figlio degli elementi tab, l'altezza della scheda verrà ricalcolato per adattarsi, o se la scheda contiene HTML grezzo e il metodo update () della scheda è utilizzata per cambiare la situazione dei contenuti, la sua altezza di nuovo, sarà regolato per adattarsi.

Se il problema è, nella mia applicazione in ogni caso, è che aggiorno il contenuto HTML grezzo di quelli con metodi di tabulazione diversi da quelli in quadro di ExtJS, come ad esempio jQuery.html (). Dal momento che il pannello scheda non viene informata di questa modifica al contenuto, non ricalcola il valore di altezza della scheda.

Per ovviare a questo tutto quello che voglio fare è garantire che gli elementi che contengono del pannello scheda sempre sono impostati su height: auto se fusi, ri-renderizzati, o qualsiasi altra cosa. Sto assumendo per raggiungere questo mi avrebbe bisogno di estendere il TabPanel, ma I don non so da dove cominciare per quanto riguarda quali sono i metodi per ignorare, ect. Ogni pensiero?

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.

Answer 2

The catchy part is making ExtJS aware that the component is updated. You need to basically, recalculate the component layout. You can use the method doLayout( ) available with the Panel class. By calling this, you are forcefully asking to the layout to be recalculated and refreshed. I think this should help you out.