¿Cómo asignar height dinámico a paneles dentro de un TabPanel dentro de otro TabPanel?
Hola camaradas. Verán que ando con algunos líos.
Básicamente tengo un Viewport que muestra bien casi todos los elementos, exceptuando los gridPanel y formPanel.
var customVp = new Ext.Viewport({
layout: 'border',
items: [new Ext.TabPanel({
region: 'center', tabPosition: 'bottom', forceLayout: true, activeTab: 0
}),
new Ext.Panel({
region: 'eats', split: true, collapsible: true
})]
});
Esa es la estructura básica. Pero dentro de cada tabPanel hay otro tabPanel:
mainTabPanel.add(new Ext.TabPanel);
A este nuevo tabPanel le agrego los paneles dinámicamente:
var newTab = new Ext.Panel({
title: 'XXX', closable: true,
items: [gird, form]
});
subTabPanel.add(newTab);
Pues bien, justo grid es una instancia de GridPanel, igual que form es un FormPanel. Es a estos dos elementos a los que no logro ponerle una altura dinámica.
Si les asigno la propiedad height al momento de crear el objeto, pues claro que se muestra bien. Pero si redimensiono la ventana, estos no se redimencionan automáticamente, y yo quisiera que esa tarea recayera en algo más, algo de la configuración, o algo así, porque quiero evitar tener que hacer "algo sucio" (cómo estar escuchando los eventos de la ventana para asignar el tamaño de la ventana @_@);
Saludos.
Gracias @Tokkaido Creo que es buena idea esa de probar el ExtDesigner, para ver el código, claro, porque me he acostumbrado mucho a construir las GUIs escribiendo línea a línea de código.
Por otra parte, había usado el vbox con una relación de flex 4 para grilla y 1 para el formulario. Empero, no me gusta que al redimencionar el navegador (paso a pantalla completa para enseñarle las cosas al jefe XD) en el formulario quedaba espacio desaprovechado.
Había intentado entonces con un felx 1 para la grilla y 0 para el formulario. Pero me dio problemas. El formulario por defecto está deshabilitado, y cuando lo habilitaba se modificaba el tamaño y me daba lata =/
Y bueno, hasta que terminé probando con border y funcionó XD
Saludos.
sabes? una buena manera de aprender a distribuir correctamente los componentes es jugar un poco con la aplicación ExtdDesigner y ver el código resultante, por lo menos por 14 dias puedes probarlo sin pagar y aprender un montón sobre como construir mas robustamente los componentes
Gracias @Tokkaido. Casi funciona bien :P
El grid se muestra bien, lo malo es que abarca todo el espacio del panel que lo contiene, y el form no se ve para nada @_@. Y yo quiero que La grilla se mire en la primer mitad del panel que lo contiene, mientras que el form en la mitad restante.
He estado experimentando y leyendo un poco, sin mucho éxito, lo únicos resultados que he obtenido es que la grilla y el formulario se ven reducidos en altura @_@.
¿Alguna idea?.
Saludos, gracias.
Actualización: Lo he solventado. Lo que he hecho es que el panel que contiene el grid y el form lo he definido con un layout "border", en tanto que al form lo asigné al norte con la propiedad "autoHaight" en true y la grilla se ubica en la región "center"
var newTab = new Ext.Panel({
title: 'XXX', closable: true,
items: [gird, form],
layout: 'border'
});
tambien podrias haberlo resuelto usando un layout 'vbox' al contenedor y a cada componente asignarle la propiedad flex:1, en caso de que querías que ocupen la misma porción cada uno, si quieres otra relación puedes jugar con por ejemplo al grid asignarle flex:2 y al form flex:1 eso haría que el grid ocupe 2 terceras partes del espacio mientras que el form solo una tercera parte, pero no olvides asignarle la propiedad
layoutConfig = {
align: 'stretch'
}
al contenedor para que ajuste los componentes al espacio disponible
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.