Blog

En sistemas grandes que manejan mucha información es recomendable mostrarla poco a poco para no sobrecargar al explorador y nuestra aplicación se ejecute más rápido, utilizando Ajax podemos ir expandiendo el árbol que necesitamos mostrar de una manera muy sencilla, en este tutorial veremos como hacerlo.

Demostración

He preparado una demostración de lo que haremos en este tutorial, te recomiendo le des un vistazo para que tengas una idea del resultado final.

Material de apoyo

Antes de continuar es necesario descargar el material de apoyo y copiarlo dentro de nuestro servidor Web que instalamos al inicio del curso.

El material consta de tres archivos, un PHP que contiene la información en un arreglo, un HTML que solamente importa el Framework de ExtJS y un JS donde escribiremos el código para este tutorial, es importante mencionar que este último archivo solamente tiene definido el “namespace” que utilizaremos.

Crear el TreePanel

Vamos a crear el componente que alojará nuestro árbol, el código siguiente debe ir dentro de la función “init” que viene en el JS del material de apoyo:

var loader = new Ext.tree.TreeLoader({		//Paso 1
	url: 'tree-ajax.php'
});

var tree = new Ext.tree.TreePanel({ 		//Paso 2
	border: false,
	autoScroll:true,
	//dataUrl:'tree-ajax.php'  //<--- Así nos crea automáticamente el TreeLoader
	loader:loader //para fines didácticos he creado el TreeLoader a mano
});

var root = new Ext.tree.AsyncTreeNode({	//Paso 3
	text: 'User files'
});

tree.setRootNode(root);			//Paso 4

En el paso 1 hemos creado un TreeLoader, en el objeto de configuración solamente definimos la propiedad “url” a donde se realizará la llamada Ajax para ir cargando los nodos.

En el paso 2 creamos el TreePanel, y le agregamos el “loader” que definimos en el paso anterior, esta es la única diferencia con respecto al tutorial anterior.

En el paso 3 creamos el nodo raíz, este nodo es el que contendrá todas las ramas y hojas que cargaremos mediante Ajax, puedes ver que se ha creado una instancia del componente “Ext.tree.AsyncTreeNode” el cual cargará los nodos dinámicamente utilizando el “loader” que ya configuramos anteriormente.

El paso 4 es de suma importancia, aquí estamos asignándole al Tree su raíz, si no hacemos este paso simplemente no veremos nada.

Mostrando el árbol

Hasta ahora solamente tenemos en memoria nuestro árbol, falta “renderizarlo” para que se pueda visualizar en la pantalla, esto lo haremos asignándoselo a una ventana de la siguiente manera:

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

La siguiente imágen muestra las peticiones Ajax que se han hecho cada que expandimos un nodo.

La información en el servidor

Debemos recordar que la información arrojada por el servidor debe estar en formato JSON con las propiedades definidas en el tutorial anterior, el PHP que viene con el material de apoyo es el siguiente.

<?php

	$id = $_POST['node'];	//Paso 1

	$nodes = array(		//Paso 2
		array(
			'id'=>1,
			'text'=>'Program Files',
			'files'=>array(
				array(
					'text'=>'File',
					'leaf'=>true
				),
				array(
					'text'=>'Config',
					'leaf'=>true
				),
				array(
					'text'=>'etc',
					'leaf'=>true
				)
			)
		),
		array(
			'id'=>2,
			'text'=>'Users',
			'leaf'=>true
		),
		array(
			'id'=>3,
			'text'=>'workspace',
			'files'=>array(
				array(
					'text'=>'Customers',
					'leaf'=>true
				),
				array(
					'text'=>'Project',
					'leaf'=>true
				)
			)
		),
		array(
			'id'=>4,
			'text'=>'System',
			'leaf'=>true
		)
	);

	if(is_numeric($id)){	//Paso 3
		$nodes = isset($nodes[$id-1]['files'])?$nodes[$id-1]['files']:array();
	}

	echo json_encode($nodes); 	//Paso 4
?>

En el paso 1 tomamos el “id” del nodo que ha sido solicitado, esto es importante para que podamos regresar la información correcta.

En el paso 2 creamos una pequeña “Base de datos”, simplemente es la información que desplegaremos, puedes ver que he definido una propiedad llama “files”, esta propiedad la asigné por conveniencia ya que si la hubiera nombrado “children” el componente la renderizará desde el principio.

En el paso 3 verificamos que el “id” sea numérico, de esta manera nos aseguramos que podremos buscar en el arreglo principal la información que nos ha sido solicitada.

En el paso 4 solamente se imprime en formato JSON los nodos a mostrar en el Tree.

Conclusiones

Crear un árbol con Ajax es muy sencillo, lo complicado es generar la información que desplegaremos, en futuros tutoriales mostraré como integrarlo con una base de datos.

¿Has utilizado este componente alguna vez? Nos gustaría escuchar tus experiencias, recuerda que tenemos un foro donde podrás preguntar las dudas que tengas y no olvides seguirnos en Twitter (@quizzpot) para estar al tanto de las actualizaciones que hacemos en el sitio.