ExtJS4 - Erweiterung ext.tab.panel, um die Einstellung der Höhenwerte zu verhindern

Question

Ich migriere eine Anwendung von extjs 3.x bis v4 und hatte einige Probleme mit den Tabpanels, da die Eigenschaft "AutoHeight" entfernt wurde. Ich weiß, wenn Sie eine Höhe für das Panel nicht explizit definieren, wird angenommen, dass es "automatische Höhe" ist, aber das ist nur bis zu einem gewissen Grad wahr.

In EXTJS4 enthält ein Registerkartenfeld ohne Höheneinsatz weiterhin Inline -CSS -Höhenwerte, die auf den Registerkarten des Registerkarte enthält, die DIVs enthalten, und diese Höhen werden aus der anfänglichen Höhe des Inhalts jedes Registerkarte Elements berechnet. Und ja, wenn Sie die Höhe der untergeordneten Komponenten der Registerkartenelemente aktualisieren, wird die Höhe der Registerkarte neu berechnet, um sie anzupassen, oder wenn die Registerkarte RAW -HTML enthält und die Methode der Registerkarte (update ()) verwendet wird, um diesen Inhalt zu ändern. Die Größe wird wieder an passen.

Wo das Problem in meiner Anwendung ohnehin ist, dass ich den RAW -HTML -Inhalt dieser Registerkarten mit anderen Methoden als diejenigen im Rahmen von ExtJS wie jQuery.html () aktualisiere. Da das Registerkarte nicht über diese Änderung des Inhalts informiert wird, berechnet sie den Höhenwert der Registerkarte nicht neu.

Um dies zu umgehen, möchte ich nur sicherstellen, dass die Elemente des Registerkartenfeldes immer auf Höhe gesetzt sind: automatisch, wenn sie wiedergegeben, neu geführt werden oder irgendetwas anderes. Ich gehe davon aus, dass ich das Tabpanel verlängern muss, aber ich weiß nicht, wo ich so weit anfangen soll, welche Methoden zu überschreiben sind. Irgendwelche Gedanken?

Answer 1

Das habe ich am Ende gemacht. Es ist definitiv nicht ideal, ziemlich hackig, aber es scheint in Ordnung zu funktionieren. Vielleicht wird jemand besser sehen, was ich jetzt versuche, jetzt zu erreichen, und kann eine bessere Implementierung entwickeln :-)

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

Möglicherweise möchten Sie dem einen "Margen-Bottom" -Wert hinzufügen style Konfiguration Ihres Registerkartenfelds, um zu verhindern, dass Inhalte an der Unterseite des Panels steigen.

Answer 2

Der eingängige Teil besteht darin, ExtJs aufmerksam zu machen, dass die Komponente aktualisiert wird. Sie müssen das Komponentenlayout im Grunde neu berechnen. Sie können die Methode verwenden doLayout( ) Erhältlich bei der Panelklasse. Indem Sie dies nennen, fragen Sie zwangsweise das Layout, um neu zu berechnen und zu aktualisieren. Ich denke, das sollte dir helfen.