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.

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'
	}
}

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:

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. 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.

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!