Árboles generados con Ajax Más videos
Comentarios: 28
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
En 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.
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.
La siguiente imágen muestra las peticiones Ajax que se han hecho cada que expandimos un nodo.
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
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.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.
Instructor del curso
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.
28Comentarios
Hola, como siempre muy claro :D. 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
Es verdad, error de edición, gracias por la observación. saludos
ese que te dijo eso es tonto... no ve que lo pusiste como comentario para indicar que se puede hacer de las dos formas... si está aprendiendo ahí solo demostró que tiene que estudiar mucho mas porque aún no lo demuestra.
Hola tengo unos problemas a la hora de realizar este ejemplo, resulta que al ponerlo en practica no me sale nada con IE pero con Firefox me sale la ventana y solo User Files pero no como carpeta soy nueva en esto y no se en que estoy fallando o talves tendra que ver estoy usando Ext-3.1.1
una consulta quisiera saber si este formato para un arbol me serviria para cargar datos de una base de datos (oracle) y mostrar un arbol de hasta dos niveles, por favor responderme a la brevedad gracias
Claro, realmente no importa el servidor que tengas de base de datos, solamente tienes que seguir el formato correcto del JSON.
este ejemplo esta diseñado para que el arbol solo tenga dos niveles, y es muy bueno gracias por el, pero para mi caso necesito un arbol de más niveles, por lo que he tenido que modificar el paso 3 y agragar un dato mas a los arreglos.
Hola .. sera que podias publicar lo que modificaste en el paso 3 para que te funcione de 3 niveles
Tengo necesidad de rellenar un árbol usando más o menos la misma filosofía de trabajo, pero lo que necesito poner es información que obtengo del cliente, es decir, no quiero usar el SetDataUrl para ir al servidor PHP, solamente estoy utilizando el objeto de Automation de MS Outlook para leer la estructura de carpetas del mail y ponerlo en un arbol desde el mismo cliente, alguien me puede ayudar???. Gracias de antemano
Hola primero que todo Gracias por el tutorial. Tengo un problema tengo la versión de Ext-3.2.1 y seguí el tutorial al pie de la letra pero cuando corro el producto final solo me sale la carpeta "User files" sin ninguna rama adentro cuando trato de expandirlo alguien me puede ayudar con eso? Gracias!
Seguramente es porque no esta regresando la información correctamente, verifica que llegue en el formato adecuado. Saludos
Al crear un arbol leyendo con ajax , cada vez que abro una rama me recarga todo el arbol en la misma rama. Como puedo corregirlo?
En el servidor debes hacer los filtros correspondientes, en cada petición se envía un parámetros "node" con el IDentificador del nodo que se ha expandido, con ese ID tu puedes regresar unicamente los hijos del nodo deseado. Saludos
Hola, muchas gracias por los tutoriales, me han salvado muchas veces, otro punto es q tengo un Tree con Ajax pero al querer pintar el arbol no me lo muestra, este es el reponse: {"data":[{"id":13278,"leaf":true,"text":"COSOPT GTS 5 ML","checked":false},{"id":11833,"leaf":true,"text":"COSOPT O+ 2% 5ML MEX","checked":false},{"id":11834,"leaf":true,"text":"COSOPT O+ 2% 5ML MEX SS","checked":false}],"success":true}
El TreePanel espera un arreglo, tu le estás enviando un objeto, intenta enviar solamente el arreglo. Saludos
me gustaria haberlo visto cargar desde xml o json
Hola, gracias por los tutoriales están buenos, como integrar este tree con un tabpanel? gracias por la ayuda.
Este tree nop detecta "id" por lo que estuve probando solo detecta el nº de registro. Si empiezo con el id 200... nunca me muestra nada. Si le saco el valor id, al enviar node=04 por ejemplo me va a mostrar el node del lugar 04, no con el id 04. Además me gustaría saber como agregarle un nivel mas por favor!!
Hola estoy rellenando un Ext.data.Record.create de manera dinámica. ¿Como podría hacer un add? ej: var record = Ext.data.Record.create([ {name: a, type:'float'}, {name: b, type:'float'}]); for(j=2; j <columnas.length;j++({ record.add({name: columnas[j], type:'float'}); } Por que sentencia debería cambiar record.add. Muchas gracias
Necesitas crear una instancia del record. Var r = new record(); r.add();
Muchas gracias por la pronta respuesta. He realizado la modificación y la consola de errores de Mozilla me da error de r.add is not a function. Muestro el trozo de código por si me he equivocado al coger la instancia: var recordTablaAvan = Ext.data.Record.create([ {name: colId[0], type: 'date', dateFormat:'d/m/Y'}, {name: colId[1], type: 'date', dateFormat:'H:i:s'}]); var r = new recordTablaAvan(); for (var j=2; j<colId.length;j++) { r.add({name: colId[j], type: 'float'}); } Muchisimas gracias de nuevo. Un saludo
Esataba medio dormido cuando te respondi O.o El objeto record no contiene un método add, para asignar valores usas el metodo set, algo así. r.set('campo','valor'); r.set('a',1); Por lo que veo tu quieres tener una colección de records, para eso usas un store ;)
Siguo sin dar con la tecla, no es una coleccion de record, sino un record pero añadiendo los valores dinamicamente. Os pongo un ejemplo. Dos botones uno CD y otro PELICULA. Si pincho en CD, aparece una tabla con unos campos y si pincho sobre PELICULA saldrán otros campos, tendría un campo comun que sería fecha de lanzamiento, pero el resto son diferentes. Mientras no se pinche en un botón o en otro no se los campos que se van a utilizar. El set no parece válido, solo me aparecen en la tabla los dos valores comunes( {name: colId[0], type: ‘date’, dateFormat:’d/m/Y’}, {name: colId[1], type: ‘date’, dateFormat:’H:i:s’}]); ) Muchas gracias
Consulta... necesito hacer que el arbol tenga mas niveles, alguien puede hacer una reseña de como hay que hacerlo para que los niveles puedan ir aumentando??? esto lo tengo q hacer de forma dinamica... que debo ir modificando??? muchas gracias
porfavor podrias decirnos como lo hiciste para modificar el paso 3 y que dato agregaste para mas niveles??¡ gracias
Pudiste agregarle un nivel mas??? ojala puedas responder gracias
No entiendo como hace la busqueda de los nodos.... es complicado el tema sin saber eso no podre lograr meterle mas nodos al arbol... para aumentarle el nivel.... q hago... alguien ayuda??? de antemano gracias
DESCARGUE EL DOCUMENTO, PERO COMO QUE VIENE INCOMPLETO, COMO LO OBTENGO? GRACIAS