ExtJS4 - Extendiendo ext.tab.Panel para evitar la configuración de los valores de altura

Question

Estoy migrando una aplicación de ExtJS 3.x a V4 y he tenido algunos problemas con los Tabpanel ahora que se ha eliminado la propiedad "AutoHeight". Sé que si no define explícitamente una altura para el panel, se supone que es "altura automática", pero eso solo es cierto hasta cierto punto.

En ExtJS4, un panel de pestaña sin establecimiento de altura aún tendrá valores de altura CSS en línea establecidos en los Divs que contienen el panel de pestaña, y esas alturas se calculan a partir de la altura inicial del contenido de cada elemento de pestaña. Y sí, si actualiza la altura de cualquier componente infantil de los elementos de la pestaña, la altura de la pestaña se recalculará para que se ajuste, o si la pestaña contiene HTML sin procesar y el método de actualización de la pestaña () se utiliza para cambiar ese contenido, Su altura nuevamente, se ajustará para que se ajuste.

Donde el problema está, en mi aplicación de todos modos, es que actualizo el contenido HTML sin procesar de esas pestañas que usan métodos distintos a los del marco de ExtJS, como jQuery.html (). Dado que el panel de pestaña no está siendo notificado de este cambio al contenido, no recalula el valor de altura de la pestaña.

Para evitar esto, todo lo que quiero hacer es asegurarme de que los elementos que contienen el panel de pestaña siempre estén establecidos a la altura: automáticamente cuando se renderiza, vuelve a renderizar o cualquier otra cosa. Supongo que para lograr esto, necesitaría extender el tabpanel, pero no sé dónde comenzar en cuanto a qué métodos anular, ECT. ¿Alguna idea?

Answer 1

Esto es lo que terminé haciendo. Definitivamente no es ideal, bastante hacky, pero parece funcionar bien. Tal vez alguien vea mejor lo que intento lograr ahora, y pueda encontrar una mejor implementación :-)

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

Es posible que desee agregar un valor de 'fondo de margen' al style Configure el panel de su pestaña para evitar que el contenido se tope contra la parte inferior del panel.

Answer 2

La parte pegadiza es hacer que los extjs sean conscientes de que el componente está actualizado. Básicamente debe recalcular el diseño del componente. Puedes usar el método doLayout( ) Disponible con la clase de panel. Al llamar a esto, está pidiendo con fuerza que el diseño se recalcule y renovará. Creo que esto debería ayudarte.