Contenedores en ExtJS (I): Ext.Panel
13/11/2008 por Javier Caride
Este es uno de los contenedore más básicos que podemos utilizar en ExtJS y del que derivan otros muchos componentes(TabPanel, Tip, Window, FieldSet, FormPanel, GridPanel, TreePanel).
Básicamente, un Ext.Panel es una región rectangular en la que podemos insertar otros componentes. Además de eso un panel puede contener una barra de herramientas superior, otra inferior, botones, etc. además de ciertos métodos que ayudan a su manejo. Como siempre, la mejor forma de ver todas las propiedades y métodos disponibles es consultar el API de ExtJS
Los contenedores Ext.Panel, admiten diversos ‘layouts’, es decir, configuraciones visuales para incluir los distintos componentes en su interior. Aunque existe una gran variedad de layouts (ver API de ExtJS, sección Ext.Layout), los más utilizados en aplicaciones son los siguientes:
- Layout ‘border’: divide el panel en 5 subpaneles (norte, sur, este, oeste y central)
- Layout ‘accordion’: divide el panel verticalmente en distintos paneles, pero sólo uno puede ser mostrado a la vez
- Layout ‘form’: configuración pensada especialmente para alojar formularios
- Layout ‘fit’: mediante esta configuración todos los elementos que contenga el panel se ajustarán en ancho y alto para ocupar el tamaño del panel
- Layout ‘column’: permite distribuir el/los contenidos en columnas
En el siguiente ejemplo podemos ver una composición de Ext.Panel relativamente compleja. En primer lugar tenemos un Ext.Panel con un layout ‘border’, que es el que contiene a todos los demás
- En la región norte (region: ‘north’) tenemos únicamente un contenido html decorado por CSS
- En la región central (region: ‘center’) hemos colocado un Ext.Panel con layout ‘accordion’, conteniendo a su vez 3 subpaneles
- En la región izquierda (region: ‘west’) tenemos un formulario, o lo que es lo mismo un Ext.Panel con layout ‘form’
- Por último en la región derecha (region: ‘east’) tenemos un panel con layout column
Como podéis ver en el ejemplo componer la aplicación con Ext.Panel no es más que configurarlos de forma que se adapten a lo que buscamos visualmente
Ext.onReady(function() {
/**
* Panel principal, con layout border
*/
var backendViewport = new Ext.Panel({
layout: 'border',
renderTo: 'divRender',
width: 800,
height: 600,
items: [{
region: 'north',
xtype: 'panel',
autoHeight: true,
border: false,
margins: '0 0 5 0',
html: '
Test
'
},{
/*
* 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'
}]
},{
/*
* Panel con layout 'form'
*/
region: 'west',
collapsible: true,
title: 'Panel izquierdo',
xtype: 'panel',
layout: 'form',
width: 300,
minWidth: 300,
autoScroll: true,
split: true,
items: [{
xtype: 'hidden',
id: 'gal_id_hidden',
name: 'gal_id'
},{
xtype: 'textfield',
name: 'gal_cat_id',
anchor: '90%',
fieldLabel: 'Categoría'
},{
xtype: 'textfield',
name: 'gal_weight',
anchor: '90%',
fieldLabel: 'Peso Galería'
},{
xtype: 'datefield',
name: 'gal_date',
anchor: '90%',
fieldLabel: 'Fecha Alta'
},{
xtype: 'textfield',
name: 'gal_relative_path',
anchor: '90%',
fieldLabel: 'Directorio'
},{
xtype: 'textfield',
name: 'gal_pho_id',
anchor: '90%',
fieldLabel: 'Imágen representativa'
}
],
buttons:[{
text: 'Enviar'},
{
text: 'Cancelar'
}]
},{
/*
* Panel con layout 'fit'
*/
region: 'east',
collapsible: true,
title: 'Panel derecho',
xtype: 'panel',
layout: 'fit',
width: 250,
items: [{
/*
* Panel con layout 'column'
*/
xtype: 'panel',
layout:'column',
items: [{
title: 'Col 1',
columnWidth: .333
},{
title: 'Col 2',
columnWidth: .333
},{
title: 'Col 3',
columnWidth: .333
}]
}]
}]
});
});