Blog

Existen diferentes tipos de layouts por ejemplo: accordion, border, absolute, column, fit, form, table, etc. Cada una nos permite acomodar nuestros bloques de maneras diferentes, además de que nos proporcionan algunos funcionamientos predeterminados.

Material de apoyo

Vamos a descargar el material de apoyo, lo descomprimes y copias dentro del servidor Web que instalamos al inicio del curso, actualiza las rutas a la librería de ExtJS en el HTML, para este tutorial usaremos la versión 3.1.

Si lo deseas puedes descargar el código fuente, podría servirte como referencia.

También puedes ver la demostración de lo que tendremos al final del tutorial.

Definición de un layout de tipo border

Si utilizamos un layout de tipo “border” podremos crear cuatro regiones norte (north), sur (south), este (east) y oeste (west), dentro de cada región podremos poner el contenido que necesitemos, es importante mencionar que también debemos crear una región central (center) en donde colocaremos el contenido principal.

Lo primero que haremos es crear un panel y renderizarlo en el div con identificador “content” de la siguiente manera:

Ext.ns("com.quizzpot.tutorial");

com.quizzpot.tutorial.BorderLayoutTutorial = {
	init: function(){

		//code goes here
		var main = new Ext.Panel({			//Step 1
			renderTo	: 	"content",
			layout		:	"border",	// Step 2
			height		:	600,
			html		:	"Hey everyone!"
		});

	}
}

Ext.onReady(com.quizzpot.tutorial.BorderLayoutTutorial.init,com.quizzpot.tutorial.BorderLayoutTutorial);

En el paso uno solamente creamos una instancia del componente Panel.

En el paso dos usamos la propiedad “layout” y le asignamos “border”, de esta manera podremos usar las regiones que mencioné anteriormente.

Si en este momento actualizamos el navegador veremos que en la consola de Firebug nos aparecerá un error, el error dice de la siguiente manera:

“uncaught exception: No center region defined in BorderLayout ext-comp-1001”

Este error se ocasiona porque es obligatorio definir la región central, para solucionarlo solamente es necesario crear el panel principal y definir su región en “center”.

var center = {
	xtype	:	"panel",
	region	:	"center",
	html	:	"Center region"
};

var main = new Ext.Panel({
	renderTo	: 	"content",
	layout		:	"border",
	height		:	600,
	items		:	[center]
});

Con esto hemos solucionado el error, ahora vamos a crear un panel y lo posicionaremos en la región “west”.

var west = {
	xtype	:	"panel",
	region	:	"west",		//Step 1
	width	:	150,		//Step 2
	html	:	"West region"
};

var main = new Ext.Panel({
	renderTo	: 	"content",
	layout		:	"border",
	height		:	600,
	items		:	[center,west]	//Step 3
});

En el paso uno solamente le asignamos la región oeste (west) al panel, esto es suficiente para que se acomode en la parte izquierda del panel principal.

En el paso dos le asignamos el “width”, esto es muy importante para que el panel tenga un tamaño fijo.

En el paso tres solamente le agregamos el panel “west” al panel principal para que podamos verlo renderizado en la pantalla.

Para crear las otras regiones es exactamente igual a los pasos anteriores, solamente necesitamos indicarle la región deseada.

var east = {
	xtype	:	"panel",
	region	:	"east",
	width	:	150,
	html	:	"East region"
};

var north = {
	xtype	:	"panel",
	region	:	"north",
	height	:	50,
	html	:	"North region"
};

var south = {
	xtype	:	"panel",
	region	:	"south",
	height	:	50,
	html	:	"South region"
};

var main = new Ext.Panel({
	renderTo	: 	"content",
	layout		:	"border",
	height		:	600,
	items		:	[center,west,east,north,south]
});

En el código anterior solamente creamos los paneles asignándoles una región y luego los agregamos al panel principal.

Crear márgenes entre las regiones

Hasta ahora las regiones se dividen por un pequeño borde, podemos agregar algunos márgenes para que la diferencia se vea mejor, vamos a utilizar la propiedad “margins” la cual recibe un objeto con los márgenes que usaremos o también recibe un String con el valor de los márgenes en pixeles.

var north = {
	xtype	:	"panel",
	region	:	"north",
	height	:	50,
	html	:	"North region",
	margins:	{top:3,bottom:3,left:3,right:3}	//Step 1
};

var south = {
	xtype	:	"panel",
	region	:	"south",
	height	:	50,
	margins:	"3 3 3 3",		//step 2
	html	:	"South region"
};

En el paso uno le pasamos un objeto con los márgenes que tendrá el panel.

En el paso dos le asignamos un String con cada uno de los márgenes que usaremos.

Redimensionando las regiones

También podemos permitir al usuario redimensionar las regiones con el mouse, para hacerlo solamente tenemos que agregar la propiedad “split” en el panel deseado.

var west = {
	xtype	:	"panel",
	region	:	"west",
	width	:	150,
	split	:	true,	//Step 1
	html	:	"West region",
	margins:	"0 3 0 3"
};

En el paso uno solamente le agregamos la propiedad “split” igual a “true” y automáticamente el panel podrá ser ajustado por el usuario.

También podríamos hacer que la región se colapse, de esta manera podríamos permitir que el usuario oculte las regiones.

var west = {
	xtype	:	"panel",
	region	:	"west",
	width	:	150,
	split	:	true,
	collapsible:         true,		//Step 1
	title	:	"West region",	//Step 2
	margins:	"0 3 0 3"
};

En el paso uno usamos la propiedad “collapsible” para permitir que el panel se colapse al dar clic sobre el botón que aparece en el título.

En el paso dos solamente eliminamos la propiedad “html” que había anteriormente y asignamos la propiedad “title” para que el panel contenga un título.

Es importante mencionar que podemos utilizar todas las propiedades de configuración que usamos en un panel, ya he hablado de este componente en tutoriales anteriores.

Border Layout dentro de una región

También podemos asignarle un layout “border” a una de las regiones que ya hemos definido, de esta manera podemos combinar varios tipos de layouts.

A continuación voy a eliminar la región del sur que tenemos hasta ahorita y voy asignarle a la región central otro layout de tipo “border” al cual también le asignaré una región central y una región al sur.

var south = {
	xtype	:	"panel",
	region	:	"south",
	height	:	150,
	collapsible: true,
	title	:	"South region"
};

var center = {
	xtype	:	"panel",
	region	:	"center",
	layout	:	"border",		//Step 1
	border	:	false,
	items	:	[{
		xtype	:	"panel",
		region	:	"center"	//Step 2
	},
	south					//Step 3
	]
};

En el paso uno le asignamos un layout de tipo border a la región central que ya teníamos.

En el paso dos le creamos la región central.

En el paso tres le asignamos la región sur.

Conclusiones

En el tutorial de hoy vimos como crear las regiones dentro de un panel con layout de tipo “border”, este tipo de layout es muy usado en muchas aplicaciones ya que nos permite redimensionar o colapsar las regiones de una manera muy sencilla.

Si tienes alguna pregunta o sugerencia puedes hacerla en los comentarios, recuerda seguirnos en Twitter (@quizzpot) para enterarte de las actualizaciones que hacemos en el sitio.