Aprendiendo Ext JS 3

Árboles generados con Ajax Más videos

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.

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

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

TreePanel dinámico

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

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.

¿Olvidaste tu contraseña?

28Comentarios

  • Avatar-2 Jurasec 14/10/2009

    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

    • Avatar-6 Crysfel 14/10/2009

      Es verdad, error de edición, gracias por la observación. saludos

      • Avatar-7 titi 11/11/2009

        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.

        • Avatar-11 Galatea 02/03/2010

          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

          • Avatar-2 luis 08/04/2010

            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

            • Avatar-7 Crysfel 08/04/2010

              Claro, realmente no importa el servidor que tengas de base de datos, solamente tienes que seguir el formato correcto del JSON.

              • Avatar-5 sadap 14/05/2010

                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.

                • Avatar-12 Lorena 21/06/2010

                  Hola .. sera que podias publicar lo que modificaste en el paso 3 para que te funcione de 3 niveles

                  • Avatar-4 Gustavo Gutierrez Barbeito 16/08/2010

                    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

                    • Avatar-3 uFercho 11/10/2010

                      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!

                      • Avatar-12 Crysfel 11/10/2010

                        Seguramente es porque no esta regresando la información correctamente, verifica que llegue en el formato adecuado. Saludos

                        • Avatar-3 pp 01/02/2011

                          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?

                          • Avatar-1 Crysfel 01/02/2011

                            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

                            • Avatar-11 tiger5412 28/03/2011

                              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}

                              • Avatar-9 Crysfel 28/03/2011

                                El TreePanel espera un arreglo, tu le estás enviando un objeto, intenta enviar solamente el arreglo. Saludos

                                • Avatar-10 paul 30/03/2011

                                  me gustaria haberlo visto cargar desde xml o json

                                  • Avatar-8 César 15/04/2011

                                    Hola, gracias por los tutoriales están buenos, como integrar este tree con un tabpanel? gracias por la ayuda.

                                    • Avatar-8 Gustavo 11/07/2011

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

                                      • Avatar-11 David 24/01/2012

                                        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 &lt;columnas.length;j++({ record.add({name: columnas[j], type:&#039;float&#039;}); } Por que sentencia debería cambiar record.add. Muchas gracias

                                        • Avatar-8 Crysfel 24/01/2012

                                          Necesitas crear una instancia del record. Var r = new record(); r.add();

                                          • Avatar-5 David 24/01/2012

                                            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&lt;colId.length;j++) { r.add({name: colId[j], type: &#039;float&#039;}); } Muchisimas gracias de nuevo. Un saludo

                                            • Avatar-10 Crysfel 24/01/2012

                                              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 ;)

                                              • Avatar-4 David 25/01/2012

                                                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

                                                • Avatar-1 Franco 13/02/2012

                                                  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

                                                  • Avatar-10 Franco 14/02/2012

                                                    porfavor podrias decirnos como lo hiciste para modificar el paso 3 y que dato agregaste para mas niveles??¡ gracias

                                                    • Avatar-3 Franco 15/02/2012

                                                      Pudiste agregarle un nivel mas??? ojala puedas responder gracias

                                                      • Avatar-8 Franco 15/02/2012

                                                        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

                                                        • Avatar-7 OTONIEL 28/08/2012

                                                          DESCARGUE EL DOCUMENTO, PERO COMO QUE VIENE INCOMPLETO, COMO LO OBTENGO? GRACIAS

                                                          Instructor del curso

                                                          Crysfel3

                                                          Autor: Crysfel Villa

                                                          Es ingeniero de software con más de 7 años de experiencia en desarrollo web.

                                                          Descarga Código Fuente Ver Demostración

                                                          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.