Contenedores en ExtJS (II): Ext.Viewport
14/11/2008 por Javier Caride
A efectos prácticos un Ext.Viewport se comporta igual que un Ext.Panel, pero realmente es un contenedor especial. Su peculiaridad es que se renderiza automáticamente en document.body, y que sólo puede existir uno por aplicación. Además su tamaño siempre es igual al de la ventana del navegador, autoajustándose automáticamente a los cambios del tamaño de esta.
Ext.onReady(function() {
var backendViewport = new Ext.Viewport({
layout: 'fit',
items: [{
/*
* Panel tipo accordion
*/
region: 'center',
xtype: 'panel',
layout: 'accordion',
defaults: {
bodyStyle: 'padding:15px'
},
layoutConfig: {
titleCollapse: false,
animate: false,
activeOnTop: false
},
items: [{
title: 'Subpanel 1',
html: 'Contenido subpanel 1'
},{
title: 'Subpanel 2',
html: 'Contenido subpanel 2'
},{
title: 'Subpanel 3',
html: 'Contenido subpanel 3'
}]
}]
});
});
En el viewport también tenemos disponibles los mismos layouts que para Ext.Panel, con lo que podemos generar aplicaciones a pantalla completa igual de complejas que con un Ext.Panel, por ejemplo aplicándole el layout ‘border’.
En el siguiente ejemplo, podéis ver la misma distribución en pantalla que en el ejemplo anterior, con la salvedad de que hemos instanciado un Ext.Viewport en lugar de un Ext.Panel