Aprendiendo Ext JS 3

Border layout Más videos

Descripción del tema

ExtJS cuenta con una excelente manera de construir nuestras interfaces, el día de hoy estudiaremos el layout de tipo “border” el cual nos permite dividir un panel o contenedor en regiones. 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.

Demostración 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.

Crear el panel contenedor

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”

La región central es obligatoria

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]
});

Agregamos una región central al pánel principal

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.

Región oeste

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.

Utilizando todas las regiones/p>

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.

Asignando márgenes a las regiones

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.

La región del lado oeste puede ser redimensionada 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.

La región oeste puede ocultarse o colapsarse

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.

Podemos anidar los layout

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.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

27Comentarios

  • Avatar-6 manolo 25/01/2010

    Wow nos estamos acercando cada vez mas a una aplicación. Gracias Crys. Como podriamos ayudar a que esto avance mas rápido?, podriamos crear tutoriales de temas que manejemos y tu solo pongas lo mas avanzado?

    • Avatar-1 Crysfel 25/01/2010

      Claro, eso sería perfecto :)

      • Avatar-10 Roberto 25/01/2010

        eres la ley viejo, gracias por compartir tu conocimiento.

        • Avatar-4 Imfael 26/01/2010

          Yo haré algo entonces :P

          • Avatar-2 ilen 26/01/2010

            tambien hare algo util y facel de entender para la comunidad

            • Avatar-4 Miguel Laynes 27/01/2010

              Bienvenidos tus temas para el 2010... es importante ver que sigue adelante el proyecto de Quizzpot.. Saludos

              • Avatar-9 Pepe 23/03/2010

                Sigue así. Un Saludo!

                • Avatar-2 Bruce 19/05/2010

                  Wow nos estamos acercando cada vez mas a una aplicación. Gracias Crys. Como podriamos ayudar a que esto avance mas rápido?, podriamos crear tutoriales de temas que manejemos y tu solo pongas lo mas avanzado?

                  • Avatar-10 Crysfel 19/05/2010

                    Seria genial si pudieran colaborar con el proyecto. Yo por ahora ando bastante ocupado y no me queda tiempo de escribir nuevos tutoriales, contar con un poco de ayuda sin duda que seria lo ideal. Te contacto por mail

                    • Avatar-6 puran 10/06/2010

                      hi, I am Getting Some problem related to border layout, Actually I have east panel in view port and one west panel which is accordian layout having panels on "after layout" of particular panel in west panel i want to hide east panel and on row click it should expand but when I am hiding than it always have its space and center panel never expand to right side, so what i did first hide than collapse but problem is that next time when i am clicking on row its coming but not expanded and the collapsible arrow is making sign of expanded. plz if any body have idea tell me.

                      • Avatar-10 puran 10/06/2010

                        hey man why u deleted my post

                        • Avatar-10 Crysfel 10/06/2010

                          I didn't :)

                          • Avatar-6 Eduardo Tovar 20/07/2010

                            Oye una duda, como se hace para que los paneles y los componentes ocupen el espacio completo donde son agregados

                            • Avatar-12 Crysfel 21/07/2010

                              Necesitas asignarle un layout de tipo "fit" al contenedor.

                              • Avatar-1 Geovanni Escalante 28/07/2010

                                Hola Crysfel me gustaría saber si tienes algun post sobre como integrar Extjs con Zend Framework o si tienes alguna página en español que explique como tú lo haces. Lo digo porque estoy intentando colocar un Layout con Extjs sobre Zend, lo que pasa es que con Zend tengo un layout que forma el header, el content y por último el footer, pero con Extjs quiero dentro del content de Zend agregar un Border layout el cual tendra west, center y east. Gracias.

                              • Avatar-3 Henry 11/09/2010

                                Hola Crys muy buena pagina nos ayuda bastante, tengo una duda,,, intento crear una grilla dentro de una region pero esta me pide para dibujar (ejm) en un grid.render('topic-grid'); el detalle es q aqui no podria mandar al render q otra solucion existe o me puesdes ayudar para q exista un grid en la region este

                                • Avatar-11 Henry 11/09/2010

                                  Gracias pero ya me salio q tonto era algo basico nomas... :S de todas maneras muchas gracias por el material

                                  • Avatar-12 Vandor 12/09/2010

                                    Felicitaciones por la pagina es muy buena, tengo una consulta y como cargo un objeto (datagrid) en una region? gracias de antemano

                                    • Avatar-10 Crysfel 13/09/2010

                                      Tienes que asignarle la instancia del grid al arreglo "items" de la región central.

                                      • Avatar-7 buy kinect 24/10/2010

                                        Hey, This is a inquiry for the webmaster/admin here at www.quizzpot.com. Can I use some of the information from your post above if I provide a backlink back to your website? Thanks, William

                                        • Avatar-2 Julian Lasso 26/12/2010

                                          Hola Crysfel, cuando veo tus tutoriales, dan ganas de uno también compartir su conocimientos y ahora me encuentro con un grupo de personas a través de correos compartiendo lo que sé hacer entre ExtJS y Symfony que realmente no es mucho y es basado en tus tutoriales :)

                                          • Avatar-1 Karo 01/04/2011

                                            Hola Crysfel, me sale un error: b is null en ext-all.js. Muchas gracias por tu ayuda.

                                            • Avatar-2 Cachondo 28/04/2012

                                              Si el problema esta en

                                              • Avatar-1 JUAN 28/11/2013

                                                cOMO CREO DOS BOTONES EN EL AREA SOUTH

                                                • Avatar-1 Maria Chavira 03/11/2014

                                                  hola otra vez Crysfel, si quisieramos que desde un menu ubicado en la regio oeste al dar clic en uno de los elementos del menu se generara un nuevo panel que se despeglara en la region central, como hariamos esto, tomando en cuenta que cada elemento del menu pudiera generar un panel diferente, ya sea un formulario o desplegar alguno imagen? Gracias por todo

                                                  • Avatar-6 Crysfel Villa 03/11/2014

                                                    Tendrías que poner un listener al evento click de tu menu en la parte lateral, dentro de este listener agregarías el nuevo componente a desplegar en la región del centro, basta con remover el anterior e insertar el que necesites. Saludos

                                                  Instructor del curso

                                                  Crysfel3

                                                  Autor: Crysfel Villa

                                                  Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                  Descarga Código Fuente Ver Demostración

                                                  Regístrate a este curso

                                                  Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

                                                  Tendrás acceso a descargar los videos, códigos y material adicional.

                                                  Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

                                                  Llevarás un registro de tu avance.