El día de hoy veremos rápidamente como mostrar una estructura de árbol utilizando el TreePanel, es muy común usar este componente para mostrar un sistema de archivos, administrar un menú, administrar categorías y muchísimas aplicaciones que podemos realizar con este componente. Una estructura de árbol es compleja de representarla gráficamente, sobre todo porque se complica dibujar correctamente los elementos o nodos del árbol, el componente TreePanel nos facilita notablemente este trabajo y nos permite crear aplicaciones con una interfaz rica.

Demo

He preparado una demostración de lo que haremos al final de este tutorial, te invito a que la pruebes y veas el resultado que obtendremos.

Material de apoyo

Para continuar es necesario descargar el material de apoyo y copiarlo dentro de nuestro servidor Web que estamos usando para este curso. En el archivo JS encontramos el siguiente código:

Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.TreeTutorial = {
	init: function(){
		
	},
	
	//returns the data for the tree
	getData: function(){
		
	}
}

Ext.onReady(com.quizzpot.tutorial.TreeTutorial.init,com.quizzpot.tutorial.TreeTutorial);

A estas alturas del curso debemos estar familiarizados con el código anterior, simplemente se crea un espacio de nombres (namespace) para evitar problemas a futuro, dentro de la función “init” vamos a crear el tree y dentro de la función “getData” escribiremos la información que desplegará el componente.

La información a desplegar

Lo más complejo al utilizar este componente es generar la información que desplegaremos, ya que la información es la clave para que funcione este componente adecuadamente, en esta ocasión la información la tendremos en memoria, decidí hacerlo así para explicar el formato en el que debemos generarla, en futuros tutoriales veremos cómo traer esta información dinámicamente desde el servidor usando Ajax, pero por ahora la tendremos en un objeto de JavaScript, el código siguiente debe ir dentro del método “getData”. ?

var root = {
	text:'Root',
	children:[
		{
			text:'Documents',
			children:[{text:'file.doc',leaf:true}]
		},{
			text:'Pictures',
			children:[{text:'friends.jpg',leaf:true},{text:'working.jpg',leaf:true}]
		},{
			text:'Presentation.ppt',
			leaf:true
		}
	]
}

return root;

Semejante a un árbol o planta (en el mundo real) el componente TreePanel también tiene una raíz (root), ramas (branches) y hojas (leaf) los cuales a su vez son nodos (Ext.tree.TreeNode) , en el código anterior se está creando una estructura de árbol que inicia con la raíz, tiene dos ramas (documents y pictures) y cuatro hojas (file.doc, friends.jpg, working.jpg y presentation.ppt) distribuidas entre las ramas, a continuación voy a explicar las propiedades utilizadas en cada nodo:

• text, Esta propiedad es de suma importancia ya que define el “label” o texto que irá en el nodo, si no defines esta propiedad simplemente no se desplegará ningún texto para ese nodo.
• children: Esta propiedad es un arreglo de nodos, esto significa que el nodo actual es una rama del árbol (branch) y dentro de esta propiedad se encuentran más nodos los cuales a su vez pueden ser ramas u hojas, eso dependerá de tu información.
• leaf: Traducido al español significa “Hoja”, al configurar esta propiedad en “true” estas haciendo que el nodo se convierta en una hoja y por lo tanto no puede contener más nodos.

Por ahora con estas configuraciones basta, más adelante veremos algunas otras, como puedes ver crear los nodos es muy sencillo, la complejidad viene cuando esto se tiene que crear dinámicamente en el servidor, pero eso lo veremos en otro tutorial, por ahora dejémoslo así de sencillo.

Creación del TreePanel

Esto es una tarea muy sencilla, y lo haremos en unas cuantas líneas de la siguiente manera:

var tree = new Ext.tree.TreePanel({  	//step 1
	border: false,
	autoScroll:true,
	root: this.getData() 		//step 2
});

var win = new Ext.Window({		//step 3
	title:'Tree panel example',
	layout:'fit',
	width:200,
	height:300,
	items: tree
});
win.show();				//step 4

En el paso 1 se crea el componente configurado para que no muestre el borde y para que nos ponga un scroll cuando el árbol crezca demasiado. En el paso 2 es donde le asignamos la información que contendrá el componente, esta información la escribimos anteriormente en este tutorial. En el paso 3 creamos la ventana que contendrá el árbol, ya debemos conocer esto pues lo hemos hecho en la mayoría de los tutoriales anteriores de este blog. Finalmente en el paso 4 mostramos todo lo anterior.

Expandiendo los nodos

En ocasiones se nos pide que el árbol aparezca expandido desde el principio, esto es muy sencillo simplemente tomamos el root y lo expandimos de la siguiente manera:

tree.getRootNode().expand();

También podemos agregar en la configuración del “root” la propiedad “expanded” y el nodo aparecerá expandido automáticamente:

var root = {
	text:'Root',
	expanded: true, // <--- aparece expandido el root
	children:[
		{
			text:'Documents',
			children:[{text:'file.doc',leaf:true}]
		},{
			text:'Pictures',
			children:[{text:'friends.jpg',leaf:true},{text:'working.jpg',leaf:true}]
		},{
			text:'Presentation.ppt',
			leaf:true
		}
	]
}

Esta es una nueva propiedad que nos permite configurar el nodo para que se muestre expandido desde el principio, es muy útil en algunas ocasiones. ?

Conclusiones

En éste tutorial vimos como crear un árbol de una manera muy sencilla, también aprendimos como expandirlo de dos maneras diferentes y la importancia que tiene la información que se desplegará, realmente mayor el trabajo de mostrar un árbol lo hacemos en el servidor para generar dinámicamente la estructura, en tutoriales siguientes veremos algunas maneras de hacer esto. Si tienes dudas o sugerencias te invito a dejarnos un comentario o inscribirte en el foro donde muchos usuarios te podrán ayudar amablemente, también recuerda seguirnos en Twitter (@quizzpot) para saber cuando actualicemos el Blog.

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!