ExtJS4 - Extension Ext.tab.Panel pour empêcher la mise en des valeurs de hauteur

Question

J'émigre une application de 3.x ExtJS à v4 et ont eu quelques problèmes avec le TabPanel est maintenant que a été supprimé la propriété « autoHeight ». Je sais que si vous ne définissez pas explicitement une hauteur du panneau, il est supposé être « hauteur automatique », mais ce n'est vrai que dans une certaine mesure.

Dans ExtJS4, un panneau à onglets sans jeu de hauteur aura encore des valeurs de hauteur en ligne css fixés sur contenant les divs du panneau d'onglets et les hauteurs sont calculées à partir de la hauteur initiale du contenu de chaque élément de l'onglet. Et oui, si vous mettez à jour la hauteur de tous les composants de l'enfant des éléments de l'onglet, la hauteur de l'onglet sera recalculé pour l'adapter, ou si l'onglet contient la méthode HTML brut et mise à jour de l'onglet () est utilisée pour changer ce contenu, sa hauteur à nouveau, sera ajusté en forme.

Lorsque la question est, dans ma demande de toute façon, est que je mettre à jour le contenu HTML brut d'utiliser les méthodes de ces onglets autres que ceux dans le cadre de ExtJS, comme jQuery.html (). Étant donné que le panneau de l'onglet n'est pas informé de cette modification du contenu, il ne recalcule pas la valeur de la hauteur de l'onglet.

Pour contourner ce tout ce que je veux faire est de veiller à ce que les éléments de panneau à onglets contenant toujours sont réglées à la hauteur: automatique lors du rendu, re-rendu, ou quoi que ce soit d'autre. Je suppose d'y arriver, je aurait besoin d'étendre le TabPanel, mais je ne sais pas où commencer dans la mesure où les méthodes de substitution, ect. Toute pensée?

Answer 1

est ce que je fini par faire. Il est certainement pas idéal, assez hacky mais il semble bien fonctionner. Peut-être que quelqu'un va mieux voir ce que je vais essayer d'accomplir maintenant, et peut arriver à une meilleure mise en œuvre :-)

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

Vous pouvez ajouter une valeur « de marge inférieure » à la configuration style de votre panneau onglet pour empêcher le contenu de buter contre le bas du panneau.

Answer 2

La partie accrocheuse rend ExtJS conscient du fait que le composant est mis à jour. Vous devez essentiellement, recalcule la disposition des composants. Vous pouvez utiliser la méthode doLayout( ) disponible avec la classe Panel. En appelant cela, vous demandez avec force à la mise en page recalculé et rafraîchi. Je pense que cela devrait vous aider.