Border layout Más videos
Comentarios: 27
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
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.
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:
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”.
Con esto hemos solucionado el error, ahora vamos a crear un panel y lo posicionaremos en la región “west”.
Para crear las otras regiones es exactamente igual a los pasos anteriores, solamente necesitamos indicarle la región deseada.
También podríamos hacer que la región se colapse, de esta manera podríamos permitir que el usuario oculte las regiones.
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.
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
“uncaught exception: No center region defined in BorderLayout ext-comp-1001”
La región central es obligatoria
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
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
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
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
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.
Instructor del curso
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.
27Comentarios
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?
Claro, eso sería perfecto :)
eres la ley viejo, gracias por compartir tu conocimiento.
Yo haré algo entonces :P
tambien hare algo util y facel de entender para la comunidad
Bienvenidos tus temas para el 2010... es importante ver que sigue adelante el proyecto de Quizzpot.. Saludos
Sigue así. Un Saludo!
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?
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
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.
hey man why u deleted my post
I didn't :)
Oye una duda, como se hace para que los paneles y los componentes ocupen el espacio completo donde son agregados
Necesitas asignarle un layout de tipo "fit" al contenedor.
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.
No, la verdad es que no tengo ningún ejemplo con Zend :(
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
Gracias pero ya me salio q tonto era algo basico nomas... :S de todas maneras muchas gracias por el material
Felicitaciones por la pagina es muy buena, tengo una consulta y como cargo un objeto (datagrid) en una region? gracias de antemano
Tienes que asignarle la instancia del grid al arreglo "items" de la región central.
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
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 :)
Hola Crysfel, me sale un error: b is null en ext-all.js. Muchas gracias por tu ayuda.
Si el problema esta en
cOMO CREO DOS BOTONES EN EL AREA SOUTH
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
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