Aprendiendo Ext JS 3

Cambiar el ícono a los nodos de un TreePanel Más videos

Descripción del tema

El día de hoy veremos cómo cambiar el ícono de los nodos a un TreePanel, esto es algo muy útil para poder representar sistemas de archivos, organigramas, categorías, etc. Para este tutorial representaremos un organigrama empresarial, cambiaremos los iconos de cada nodo para lograr nuestro objetivo. He preparado una demostración para que puedas ver el resultado final.

Demostración del tutorial

Material de apoyo

Vamos a descargar el material de apoyo el cual consta de un archivo HTML donde únicamente estamos importando la librería de ExtJS, también cuenta con un JS el cual está en blanco y sobre el cual escribiremos el código de este tutorial, también encontrarás una carpeta con los iconos que usaremos. Recuerda copiar todos los archivos al servidor Web que instalamos al inicio de este curso.

Namespace

Vamos a encapsular nuestro código dentro de un buen namespace.
Ext.ns("com.quizzpot.tutorial");

com.quizzpot.tutorial.TreeIconsTutorial = {
	init: function(){
		//code goes here
	},
	
	getData: function(){
		//here we are going to define the data
	}
}

Ext.onReady(com.quizzpot.tutorial.TreeIconsTutorial.init,com.quizzpot.tutorial.TreeIconsTutorial);
He creado dos funciones dentro del objeto principal, si has venido siguiendo el curso sabrás que dentro de la función “init” escribiremos el código principal de nuestra aplicación. Dentro de la función “getData” escribiremos el código necesario para generar la información que desplegaremos en el TreePanel, ya hemos hecho algo semejante en el tutorial anterior. ?

Creación del TreePanel

Crear el TreePanel es algo muy sencillo y lo realizamos en unas pocas líneas de código de la siguiente manera:
var tree = new Ext.tree.TreePanel({  	
	border: false,
	autoScroll:true,
	rootVisible:false,
	root: this.getData() 		
});
Con respecto al tutorial anterior la única diferencia es que he agregado la propiedad “rootVisible” la cual nos permite mostrar u ocultar el nodo “root”, por defecto esta como visible, pero para este ejemplo he decidido ocultarlo.

Mostrar el Tree en una ventana

Hasta ahora el Tree solamente existe en memoria, necesitamos renderizarlo en nuestra página Web para que el usuario pueda verlo, existen varias maneras de hacerlo, para este ejemplo usaremos una ventana que contenga al Tree.
var win = new Ext.Window({		
	title:'Icons example',
	layout:'fit',
	width:300,
	height:400,
	items: tree
});
win.show();	
Si en este momento actualizamos el explorador nos aparecerá un error en el Firebug mostrando “this.root is undefined”, esto ocurre porque no hemos definido el “root”, para definirlo vamos a modificar la función “getData” de la siguiente manera:
getData: function(){
	//here we are going to define the data
	return {
		text:'The root node'
	}
}

Ventana con TreePanel vacio

Nota que el root está oculto y como no tenemos información extra simplemente aparece en blanco la ventana. ?

Definiendo el organigrama

Cuando usamos el componente TreePanel debemos tener en cuenta que la información es lo más importante ya que le da vida a este componente, vamos a definir algunas posiciones o puestos en el organigrama que desplegaremos, esto lo hacemos en la función “getData”.
getData: function(){
	//here we are going to define the data
	return {
		text:'The root node',
		children:[
		{
			text:'President and CEO',
			children:[
			{
				text:'Senior Vice-President',
				leaf:true
			},{
				text:'Executive Vice-President',
				leaf:true
			}
			]
		}
		]
	}
}
Hasta aquí nada nuevo, ya hemos hablado de esta estructura en el tutorial anterior, si actualizamos nuestro navegador veremos algo como la siguiente imagen:

TreePanel con sus iconos por defecto

Cambiando los íconos

Una vez construido lo anterior llegamos a la parte principal de este tutorial, vamos a cambiar los iconos de cada nodo para darle una mejor apariencia.
return {
	text:'The root node',
	children:[
	{
		text:'President and CEO',
		iconCls:'ceo-icon', //the icon CSS class
		children:[
		{
			text:'Senior Vice-President',
			iconCls:'vice-icon',//the icon CSS class
			leaf:true
		},{
			text:'Executive Vice-President',
			iconCls:'vice-icon',//the icon CSS class
			leaf:true
		}
		]
	}
	]
}
Hemos utilizado la propiedad “iconCls” para asignarle una clase CSS en la cual tenemos definido el icono que usaremos, lo siguiente que debemos hacer es definir esas clases CSS en nuestro documento HTML o en nuestra hoja de estilos de la siguiente manera:
.ceo-icon{background:transparent url(icons/user_gray.png) 0 0 no-repeat !important;}
.vice-icon{background:transparent url(icons/user_suit.png) 0 0 no-repeat !important;}
Nótese que se está haciendo uso de “!important” en la definición de los estilos. Si actualizamos el navegador veremos algo semejante a la siguiente imagen.

TreePanel con íconos personalizados

A continuación voy a definir más puestos en el organigrama, es algo muy sencillo y que podríamos hacerlo dinámicamente en el servidor y desplegarlo en el TreePanel usando Ajax para actualizarlo, pero para hacerlo más rápido decidí hacerlo de esta manera.
var root = {
	text:'Root',
	children:[
		{
			text:'CEO',
			iconCls:'ceo-icon',
			children:[
				{
					text:'Assistant',
					iconCls:'assistant-icon',
					leaf:true
				},{
					text:'Software Architect',
					iconCls:'architect-icon',
					leaf:true
				},
				{
					text:'Project Manager',
					iconCls:'pm-icon',
					children:[
						{
							text:'Developers team leader',
							iconCls:'developer-icon',
							children:[
								{
									text:'Software developer',
									iconCls:'developer-icon',
									leaf:true
								},
								{
									text:'Software developer',
									iconCls:'developer-icon',
									leaf:true
								},{
									text:'Software developer',
									iconCls:'developer-icon',
									leaf:true
								},{
									text:'Software developer',
									iconCls:'developer-icon',
									leaf:true
								}
							]
						},{
							text:'QA team leader',
							iconCls:'tester-icon',
							children:[
								{
									text:'Tester',
									iconCls:'tester-icon',
									leaf:true
								},
								{
									text:'Tester',
									iconCls:'tester-icon',
									leaf:true
								},{
									text:'Tester',
									iconCls:'tester-icon',
									leaf:true
								},{
									text:'Tester',
									iconCls:'tester-icon',
									leaf:true
								},{
									text:'Tester',
									iconCls:'tester-icon',
									leaf:true
								}
							]
						}
					]
				},{
					text:'Sales manager',
					iconCls:'sales-icon',
					leaf:true
				}
			]
		}
	]
};
Los nuevos estilos para los iconos son:
.manager-icon{background:transparent url(icons/user_orange.png) 0 0 no-repeat !important;}
.hc-icon{background:transparent url(icons/user_female.png) 0 0 no-repeat !important;}
.pm-icon{background:transparent url(icons/user_red.png) 0 0 no-repeat !important;}
.developer-icon{background:transparent url(icons/user.png) 0 0 no-repeat !important;}
.tester-icon{background:transparent url(icons/user_green.png) 0 0 no-repeat !important;}
Con las modificaciones anteriores tenemos algo como la siguiente imagen.

Nuestro tutorial terminado lucirá así

Conclusiones

Los TreePanel son muy útiles para desplegar información en forma de árbol, además es un componente muy flexible. El día de hoy solo vimos como cambiar el ícono de cada nodo, con esto podremos desarrollar interfaces muy atractivas y usables. Si tienes alguna duda o sugerencia puedes dejarnos un comentario o bien inscribirte en el foro (http://foro.quizzpot.com) donde podremos platicar mejor, no olvides seguirnos en Twitter (@quizzpot) para estar al tanto de las actualizaciones en este 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?

9Comentarios

  • Avatar-9 Manolo 28/10/2009

    Muy buenos los tutoriales, pero hasta ahora ninguno de un caso pseudo real. Por separado logramos manejar los componentes, pero sería muy útil si mostraras un CRUD, ver como integrar una aplicación, por que de momento la mayoría de los que seguimos el curso lo agrupamos torpemente, podrías hacer un tutorial que hablé acerca de eso? como segmentar una aplicacion, como segmentar código, buenas practicas, consejos etc.

    • Avatar-4 Crysfel 28/10/2009

      Hola Manolo. Para allá vamos, hay varias ideas para el sitio, pero ten por seguro que pronto comenzaremos escribiendo ese tipo de tutoriales. Saludos

      • Avatar-7 FontBonf 31/10/2009

        Ojla sea pronto,por que no encuentro muy útil saber manejar los componentes sin poder integrarlos jajaja

        • Avatar-10 Jean Hernández 20/11/2009

          Particularmente me han sido de gran ayuda todos y cada uno de los tutoriales, también hay que entender que no puedes conseguir todo lo que necesitas en un solo lugar, y mucho menos si ese lugar esta apenas siendo creado día a día y poco a poco. Además para poder aprender ExtJS se me ha hecho necesaria más de una página, incluyendo el foro oficial.

          • Avatar-12 Bladimir Balbin 06/01/2010

            crisfel, es posible trabajar este tree panel trayendo los datos desde una tabla de una base de datos. Si es posible podrias explicarme como?

            • Avatar-10 Crysfel 06/01/2010

              Ya escribí un tutorial donde explico exactamente lo que necesitas: http://www.quizzpot.com/2009/12/ordenar-los-nodos-de-un-treepanel/ saludos

              • Avatar-10 Uziel García López 18/01/2011

                Hola, es posible cambiar el formato a los nodos?? por ejemplo que aparezca el nombre del nodo en negritasy poner abajo una dirección. Gracias y saludos!

                • Avatar-2 Crysfel 18/01/2011

                  Claro, es completamente posible, en la propiedad "text" puedes agregar el HTML que quieras mostrar y te lo renderiza sin problemas.

                  • Avatar-2 PabloChe 10/11/2011

                    Si quiero cambiar los íconos en un TreePanel me funciona perfecto, siguiendo estas instrucciones (grande, Crysfel), pero solamente en Internet Explorer, o en Mozilla Firefox cambiando el motor de renderizado al de Internet Explorer: en cualquier otro navegador muestra los dos íconos estándar (probé con Mozilla Firefox (el que más uso), con Google Chrome, con Safari y con Opera). Además tuve otro problema (mucho menor): cambié algunos íconos (tuve que usar .png de 16x16 para que se vean bien) y, aunque moví los anteriores a otro directorio y les cambié el nombre, los seguía usando: tuve que cambiarle el nombre al ícono y a la entrada en para que lo cambie. ¿Alguien tiene idea de cómo solucionar mi problema con los íconos (el primero: que no toma los míos)?. Estoy usando (en este caso) ExtJS 3.4 Desde ya, gracias PabloChe

                    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.