Auto-size Ext JS Ventana basada en contenido, hasta maxHeight

Question

Utilizando Ext JS 4.0.2, intento abrir una ventana que se dimensiona automáticamente lo suficientemente grande como para ajustarse a su contenido, hasta que alcanza un límite de altura, en qué punto deja de hacerse más grande y muestra una barra de desplazamiento.

Esto es lo que estoy haciendo

Ext.create('widget.window', { 
    maxHeight: 300, 
    width: 250, 
    html: someReallyBigContent, 
    autoScroll: true, 
    autoShow: true 
}); 

Cuando la ventana se representa en primer lugar, que es de tamaño suficientemente grande para el contenido realmente grande - más grande que el maxHeight debería permitir. Si intento redimensionarlo, entonces se ajusta al maxHeight de 300px.

¿Cómo restrinjo la ventana a su maxHeight cuando se procesa inicialmente?

Answer 1

Tengo exactamente el mismo problema y por ahora estoy haciendo un truco sucio Litle :)

this.on('afterrender', function() { 
    if (this.getHeight() > this.maxHeight) { 
     this.setHeight(this.maxHeight); 
    } 
    this.center(); 
}, this); 

En función del contenido de la ventana, debe utilizar el evento afterlayout. En lugar de usar this.maxHeight, para usar toda la ventana gráfica, use Ext.getBody().getViewSize().height o en vainilla JS use window.innerHeight.

Esta versión funcionará incluso si las ventanas contiene otros componentes y no sólo es enorme html:

listeners: {afterlayout: function() { 
    var height = Ext.getBody().getViewSize().height; 
    if (this.getHeight() > height) { 
     this.setHeight(height); 
    } 
    this.center(); 
}} 

Answer 2

Puede agregar esta configuración en la ventana

maximizable: true 

si lo desea, mediante programación podría 'clic' en ese botón :)

Answer 3

Ahora veo lo que está tratando de hacer. Creo que lo único que falta en tu configuración es el parámetro de altura. Establézcalo en el mismo número que maxheight. Eso debería hacerlo, no necesitará llamar a setHeight().

Answer 4

no veo una manera fuera de la caja para hacer esto. Sin embargo, puede probar este enfoque:

Coloque los contenidos de la ventana en un contenedor dentro de la ventana (es decir, haga que algunosReallyBigContent estén dentro de un contenedor). En afterrender, obtenga la altura de ese contenedor interno y luego proceda a configurar el altura de la ventana exterior en función de eso.

Answer 5

como terminé mostrando una ventana con una cantidad desconocida de campos en un formulario (= limitar body.el):

prefForm.itemId = 'prefForm'; 
win = Ext.create('Ext.window.Window', { 
    layout : { 
     type : 'vbox', 
     align : 'center' 
    }, 
    buttons : buttons, 
    maxHeight : constrain.dom.clientHeight - 50, 
    title : title, 
    items : prefForm, 
    listeners : { 
     afterrender : { 
      fn : function(win) { 
       var f = win.down('#prefForm'); 
       f.doLayout(); 
       var h = f.body.dom.scrollHeight; 
       if (f.getHeight() > h) 
        h = f.getHeight(); 
       win.setHeight(h + 61); 
       win.center(); 
      }, 
      single : true 
     } 
    } 
}); 

Answer 6

Esto es igual que Ivan Novakov respuesta, excepto lo prefiero cuando se anula el Clase deRender para este tipo de clases.

Esto es por un par de razones. Elimina un detector de eventos adicional, y en el caso de que tenga varias cosas que deben ocurrir en el momento posterior a la entrega. Puede controlar la sincronización de estas tareas.

onRender: function(ct,pos) { 
    //Call superclass 
    this.callParent(arguments); 
    if (this.getHeight() > this.maxHeight) { 
     this.setHeight(this.maxHeight); 
    } 
    this.center(); 
} 

Answer 7

Tuve un pequeño problema. En mi caso código ExtJS allí dentro de las ventanas emergentes HTML. Y tuve que lograr:
cambiar el tamaño del panel cuando cambiamos el tamaño de las ventanas emergentes. La solución de Ivan Novakov funcionó para mí.

Ext.EventManager.onWindowResize(function() { 

     var width = Ext.getBody().getViewSize().width - 20; 
     var height = Ext.getBody().getViewSize().height - 20; 
     myPanel.setSize(width, height); 

}); 

Answer 8

Esto puede ser mejor:

bodyStyle: { maxHeight: '100px' }, autoScroll: true,