Integración del TreePanel y TabPanel Más videos
Comentarios: 29
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
Es muy común que en alguna aplicación usemos un layout de tipo “border”, generalmente en la región “oeste” colocamos el menú principal usando un “TreePanel” para desplegar las secciones o categorías y en la región central desplegamos los módulos de nuestra aplicación.
En esta ocasión veremos cómo desplegar múltiples contenidos que se tienen en un TreePanel, utilizando un TabPanel para visualizar el contenido del árbol.
Esta es una muestra de lo que se obtendrá al final de este tutorial. Recuerda que puedes descargar el código fuente si es necesario.
Resultado final
Encapsulando el código
Es muy necesario encapsular nuestro código para evitar problemas en el futuro, así que crearemos un objeto donde alojaremos el código del tutorial.Ext.ns("com.quizzpot.tutorial");
com.quizzpot.tutorial.IntegracionTutorial = {
init: function(){
//el código irá aquí
}
}
Ext.onReady(com.quizzpot.tutorial. IntegracionTutorial.init,com.quizzpot.tutorial. IntegracionTutorial);
La función “init” se ejecutará tan pronto como el DOM esté listo, por lo tanto ahí debemos colocar el código que necesitamos ejecutar primero.
Creando el Layout
En primer lugar vamos a crear el layout que tendrá nuestra aplicación, en la parte izquierda necesitamos que aparezca el TreePanel y en la parte derecha el panel donde se verá la información al dar clic sobre alguna opción del menu. Como hemos visto en tutoriales pasados cuando usamos un layout de tipo “border” es necesario que definamos las regiones que contendrá.var center = {
xtype : "panel",
region : "center",
layout : "fit",
border : false,
margins : {bottom:3,right:3}
};
var west = {
xtype : "panel",
region : "west",
width : 150,
split : true,
collapsible: true,
title : "West region",
margins : "0 0 3 3"
};
var north = {
xtype : "panel",
region : "north",
height : 50,
html : "North region",
margins : {top:3,bottom:3,left:3,right:3}
};
var main = new Ext.Panel({
renderTo : "content",
layout : "border",
height : 600,
items : [center,west,north]
});
No entraremos en detalles del layout ya que esto se ha tratado en tutoriales pasados solo comentar que la propiedad “renderTo” tiene asignado “content” el cual es el ID de un div definido en el DOM.
Ya que tenemos las regiones definidas este es el resultado.
Boder Layout
Creación del menú principal
Ya que tenemos nuestro layout listo podemos introducir los componentes. Primero crearemos el TreePanel. Este es un proceso que se realizado ya en varios tutoriales previos.var tree= new Ext.tree.TreePanel({
border : false,
autoScroll : true,
root : this.getData()
});
Si lo notaron, hay una llamada al método “this.getData”, este método está definido dentro del objeto principal de la siguiente manera:
getData : function(){
var root = {
text:'Informacion',
expanded: true,
children:[
{
text:'Usuarios',
children:[{text:'Felipe',leaf:true},
{text:'Omar',leaf:true}]
},{
text:'Departamentos',
children:[{text:'Compras',leaf:true},
{text:'Ventas',leaf:true}]
}
]
}
return root;
}
Éste método tiene por objetivo de generar los nodos que tendrá el árbol.
Por último es necesario asignar el TreePanel que recién creamos a la región oeste (west) de nuestro layout principal que creamos al inicio del tutorial.
var west = {
xtype : "panel",
region : "west",
width : 150,
split : true,
collapsible:true,
title : "West region",
margins : "0 0 3 3",
items : [tree] //asignames el tree en la parte oeste...
};
Hasta este punto deberíamos tener algo semejante a la siguiente pantalla:
Colocando el Árbol
Pestaña inicial
Ya que tenemos nuestro árbol creado procederemos a crear la pestaña Home, la cual será una pestaña fija ya que es aquí donde podemos poner la información inicial que verá el usuario.//cracion de el primer tab (home)
var home= new Ext.Panel({ //step 1
title : "Home",
html : "home page"
});
//creamos el TabPanel para almacenar los tabs
this.tabs = new Ext.TabPanel({ //step 2
border : false,
activeTab : 0,
enableTabScroll : true, //hacemos que sean recorridas
items : [home]
});
En el paso uno creamos la pestaña con sus propiedades, aquí podríamos poner cualquier cosa que necesitemos, para dejar las cosas más sencillas solamente le he definido un texto.
En el paso dos creamos el panel en el cual se alojaran las pestañas que serán creadas dinámicamente cuando el usuario de click sobre algún elemento del menú principal. Por el momento solo cuenta con la pestana Home
Una vez que tenemos nuestro TabPanel listo lo siguiente es ponerlo en el lugar correcto, lo haremos en la región central ya que es aquí donde normalmente va el contenido principal.
var center = {
xtype : "panel",
region : "center",
layout : "fit",
border : false,
margins : {bottom:3,right:3},
items : [{
xtype : "panel",
items:[this.tabs] //Asignamos el tabpanel a la región central
}]
};
Primer Tab
Asignar eventos al menú principal
Hasta ahora solo contamos con nuestro layout terminado, el TreePanel y el TabPnel. Es hora de hacer de nuestra aplicación algo más dinámica, para esto haremos que cuando el usuario de click sobre un nodo del árbol se abra una pestaña con la información sobre el nodo al cual se le dio click.tree.on('click',function(node){
this.addTab(node);// esta función será creada a continuación
},this);
En el código anterior asignamos un listener al evento “click” del TreePanel, y con esto cuando el usuario de click sobre uno de los nodos esta función se ejecutara y se le dará como parámetro el “nodo” en el cual se ha dado el click.
Lo siguiente es crear una pestaña y agregarla al TabPanel. En esta pestaña es donde se visualizara la información que contiene el nodo en el cual se ha dado click, todo esto lo hará la función “addTab” que es ejecutada dentro del listener.
addTab : function(node){
var tab = this.tabs.findById("id-"+node.id); // step 1
if(!tab){ //step 2
tab = new Ext.Panel({
id : "id-"+node.id,
closable: true, //para que se pueda cerrar el tab
title : node.attributes.text, //step 3
html : 'This is the main content'
});
this.tabs.add(tab); //step 4
this.tabs.doLayout();
}
this.tabs.activate(tab); //step 5
}
En el paso uno busca si el tab ya ha sido creado anteriormente, esta búsqueda la hace mediante el id.
En el paso dos valida si se ha encontrado el tab, y si no existe procedemos a crearlo, la idea de esto es que solamente sea creado una sola vez.
En el paso tres observemos que es colocado el título al tab, lo interesante es que bajo “atributo” encontramos toda la información que contiene el nodo, y con esto accedemos a su texto que usaremos como titulo de la pestaña.
En el paso cuatro agregamos el tab que acabamos de crear al TabPanel y lo refrescamos para que pueda mostrar en pantalla las modificaciones que ha sufrido.
En el paso cinco activamos el tab del nodo en el cual se ha dado click, si ya existía solamente se hace visible.
Conclusiones
El tutorial del día de hoy es una mescla de tutoriales pasados, lo interesante aquí es la manera en que se integran para crear una aplicación sencilla. Es importante mencionar que en lugar de instanciar un Panel cuando se ha dado click a un nodo del tree, podríamos instanciar nuestros módulos y así ir desplegando diferentes contenidos en cada tab. Si tienes alguna duda o comentario porfavor coméntenlo en el foro, recuerden seguirnos en Twitter (@quizzpot) o Facebook para estar al tanto de las actualizaciones.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.
29Comentarios
Gracias por retomar los tutoriales. Definitivamente una de mis paginas favoritas!!. Saludos desde Argentina.
Hola q tal increible tus tuto, sigue asi, porque contigo e aprendido bastantisimo. Este tambien te queria pedir un favor que me ayudes con el crack de EXT DESIGNE pliissssss.... Te quedo muy agradecida. xcia al s1bdennys17@hotmail.com
que tal crysfel!!! deberias poner al final de esta pagina de quizpot http://www.quizzpot.com/2009/01/ext-js-framework/, que han seguido con algunos tutoriales aqui, me entere de estos tuto de casualidad.. saludos :=)
Buenisimo el tutorial, ahora solo tengo una duda como hago para que cuando haga clic en información o en Usuarios por ejemplo no me abra un nuevo tab, gracias.
Buen ejemplo Victor es de mucha ayuda pero tengo una duda como lo comentas al final necesito en vez de instanciar un panel necesitaría instanciar un php por ejemplo de un modulo que ya tengo hecho? te agradecería enormemente tu ayuda, saludos.
Para eso tenemos que verificar que el nodo al que se le dio clic sea un nodo valido. Esto lo haremos en la función "addTab" después de que obtenemos el id del nodo haremos lo siguiente: if(node.isLeaf()){ if(!tab){// el código no cambia... } } con esto cada vez que se de clic sobre un nodo verificara si es una hoja del árbol y abrirá un tab si ese es el caso.
hola a todos, tengo una duda a la hora de ingresar el contenido en los tabs, y es que mi contenido es un grid o un form que esta en otro fichero js y encerrado en un namespace
Victor el ejemplo esta muy bien, pero tengo una observacion: la opcion padre no deberia abrir una pestaña solo los hijos oel ultimo nivel. Tambien sera bueno que este menu tree sea construya desde un DB. Gracias
Muy buen aporte...estoy tb de acuerdo con Francisco..yo tb me hice problemas con la configuración del tree panel para generarlo desde una basse de datos...pero bueno...aun asi del tutorial he aprendido un buen!! gracias
Hola amigo, muy buen tuto, pero tengo un problema, cuando creo el nuevo tab(adentro un grid), y quiero agrandar el area del "west" o sea del tree, el grid no se reacomoda... como puedo hacerlo ? hay alguna opción ?? intente con el viewConfig { autoFit: true, forceFit:true} y ahun nada.. thx..
No entiendo :S ...necesitare siempre tu libreria para construir ese menu...
Excelente tutorial!!! He estado buscando esto por un buen tiempo, y no lo habia encontrado. Muchas gracias por compartir tus valiosos conocimientos!!
Victor! Una consulta, como haria para instanciar un modulo, es decir, dar clic en un nodo del tree y desplegar una pagina diferente en cada tab?
hola... interesante el tuto y de gran ayuda :) Una consulta, si al momento de dar clic en las hojas, cuando se crea la tab, quisiera cargar contenido dinamico de php como lo debería hacer??? gracias de antemano... saludines y suerte...
Hola, Tengo una consulta y como hago si quiero llamar a un formulario es decir tengo un principal y un secundario,donde el principal es el admin system(main.js) y el secundario (formu.js), donde estan mis formularios q deseo llamar cuando selecciono alguna opcion de mi tree como lo haria. Gracias !
Gracias por este sitio, me ha servido muchisimo, tengo un problema al tratar de hacer el addtab, especificamente en la linea: var tab = this.tabs.findById("id-"+node.id); me da el error : this.tabs.findById is not a function Alguien tiene idea de como solventarlo?, como dato adicional, el Ext js que tengo instalado es la version 4.
Hola gracias puedes hacer el mismo ejemplo en Extjs4, saludos.
graciassss un mundo, you are the best!!!!!! sigue asi
¿Es posible cargar un controlador al hacer click sobre un nodo? De esta forma solo se carga lo que se necesita.. logica_razon@hotmail.com
Si, definitivamente, pero tendrías que crear tu propio sistema de carga de módulos. Mira como lo hice yo con Ext4 https://github.com/crysfel/Bleextop/blob/master/js/Bleext/desktop/Application.js#L116 Saludos
Crysfel Villa , muy agradecido por vuestra pronta respuesta.Revise el visualizar de carga de mi browser y vi que definitivamente cargabas bajo demanada los módulos .
Crysfel Villa , tu crees que el ejemplo de de sencha "extjs kitchen cargue bajo demanda"?..He visto el browser y por cada click en el nodo me carga componentes , semejante a lo que tu has hecho? Me gustaría una opinión personal tuya , gracias desde ya.
No, no lo hace, en desarrollo carga clase por clase (lo cual es muy lento) pero en producción solo descarga un solo archivo con todas las clases, tendrías que generar módulos y hacer un sistema que los cargue bajo demanda.
Gracias Crysfel.Miraré tus módulos para aprender como lo hace... Excelente trabajo Crysfel...
cuando descargo el código fuente de este tema me sale el código crud-Form-src que no es igual a la explicación, según la explicación puedo llegar hasta la visualización de los paneles pero no puedo integrar el treepanel, podrías ni los tabpanels, podrias verificar el código fuente para poder descargarlo, gracias
Crysfel tampoco puedo descargar la demostración :/
Es cierto, al parecer hubo un error al migrar de servidor, aquí está el código JavaScript de este tutorial: http://demos.bleext.com/quizzpot/extjs/layouts/tree-tab.js
Buenas noches les envio un Gran Saludos a la comunidad de Quizzpot hacen una excelente labor , al descargar el codigo de este tema de Integración del TreePanel y TabPanel me descarga los archivos de crud-Form-src. si pueden hacerme llegar el codigo se los agradeceria necesito saber como hago para seleccionar un nodo y en el tab panel se me visualice un formulario o una grid Gracias!!!!
Buenas noches les envio un Gran Saludos a la comunidad de Quizzpot hacen una excelente labor , al descargar el codigo de este tema de Integración del TreePanel y TabPanel me descarga los archivos de crud-Form-src. si pueden hacerme llegar el codigo se los agradeceria necesito saber como hago para seleccionar un nodo y en el tab panel se me visualice un formulario o una grid Gracias!!!!