Árboles generados con Ajax
Oct 14, 2009 | Español | By Crysfel | 23 Comments | Read in EnglishEn el tutorial anterior vimos como crear un TreePanel utilizando información alojada en un arreglo de JavaScript, el día de hoy veremos cómo generar el árbol utilizando Ajax para cargar el contenido dinámicamente.
Author: Crysfel
I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter
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.
TreePanel generado con Ajax
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();
TreePanel dinámico
La siguiente imágen muestra las peticiones Ajax que se han hecho cada que expandimos un nodo.
Peticiones Ajax
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.
Commercial ExtJs and Sencha Touch Themes
Hola, como siempre muy claro
. Solo tengo un comentario, el TreeLoader no lo estas usando, a mi parecer quedaria:
var tree = new Ext.tree.TreePanel({
border: false,
autoScroll:true,
//dataUrl: ‘tree-ajax.php’
loader: loader
});
ó no usar un objeto TreeLoader ya que la propiedad dataUrl crea automáticamente un TreeLoader.
Yo estoy aprendiendo, si me equivo favor de corregirme.
Saludos