Aprendiendo Ext JS 3

Mostrar información de un archivo XML Más videos

Descripción del tema

El día de hoy voy a mostrar como cargar información en un grid a partir de un archivo XML, esto es muy sencillo de realizar y útil a la hora de desarrollar aplicaciones.

Material de apoyo

Para continuar necesitamos descargar el material de apoyo, y copiar los tres archivos dentro de nuestro servidor Web, hemos estado trabajando dentro de la carpeta “curso” donde ya tenemos la librería de Ext JS y además ya creamos una carpeta que se llama “grids” para este capitulo. Antes de continuar puedes ver la demostración de lo que vamos a estar haciendo en este tutorial.
gridpanel

Ejemplo final

Empaquetando el código

Ya sabemos que empaquetar nuestro código es una muy buena práctica, así que vamos a crear el namespace o “paquete” para este tutorial.
Ext.ns('com.quizzpot.tutorial');

com.quizzpot.tutorial.GridXmlTutorial = {
	init: function(){		
		//code goes here
	}
}

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

El XML a utilizar

Vamos a utilizar XML como nuestra fuente de datos, estos datos pueden estar contenidos en una base de datos, un servicio Web, un archivo, etc. Para hacer las cosas más sencillas en este ejemplo he puesto la información directamente en el código fuente de la siguiente manera:
<?php
	header("Content-Type: text/xml"); 
	
	echo '<?xml version="1.0" encoding="UTF-8"?>';
?>

<people>
	<person>
		<name>Jack Slocum</name>
		<age>32</age>
		<position>Chief Software Architect and Founder</position>
		<company>Ext JS</company>
	</person>
	<person>
		<name>Sasha Cohen</name>
		<age>24</age>
		<position>Figure Skating</position>
		<company></company>
	</person>
	<person>
		<name>John Resig</name>
		<age>24</age>
		<position>JavaScript Developer</position>
		<company>Mozilla Corporation</company>
	</person>
	<person>
		<name>Sara Mcfly</name>
		<age>35</age>
		<position>Tester</position>
		<company>Google</company>
	</person>
	<person>
		<name>Crysfel Villa</name>
		<age>25</age>
		<position>Software Developer</position>
		<company>JWM Solutions</company>
	</person>
	<person>
		<name>Felicia Day</name>
		<age>30</age>
		<position>Actress</position>
		<company></company>
	</person>
	<person>
		<name>Collis Ta'eed</name>
		<age>29</age>
		<position>CEO</position>
		<company>Envato</company>
	</person>
</people>

El registro “Person”

Vamos a desplegar en el grid la información contenida en el XML, estos son datos de personas, por lo tanto vamos a crear el registro “Person” y ‘mapearlo’ con el nodo “person” del XML.
var Person = Ext.data.Record.create([
	{name: 'name'},
	{name: 'position'},
	{name: 'age', type:'float'},
	{name: 'company'}
]);

Crear el “Reader”

Ahora vamos a crear el “lector” que le asignaremos al “store”:
var reader = new Ext.data.XmlReader({
	record: "person"               
}, Person); 
Aquí solamente hemos definido en la configuración del “reader” la propiedad “record” y le hemos asignado el valor “person”, con esto el “reader” será capaz de ir a los nodos “person” (en el XML) y extraer la información contenida en el objeto “Person” que definimos anteriormente.

Crear el Store y cargar la información

El siguiente paso es crear el “Store” y cargar la información del XML, esto se hace de la siguiente manera:
var store = new Ext.data.Store({
	url: 'xml.php',
	reader: reader
});
		
store.load(); 
Primero se define la “url” donde se va a buscar el XML mediante Ajax, el segundo parámetro de configuración es asignarle el “reader” al “Store”. Una vez creado el store podemos utilizar el método “load” para realizar la petición “Ajax” y recibir la información. Hasta aquí solamente hemos definido la fuente de datos, haciendo las configuraciones necesarias. Si no te ha quedado clara esta parte del “Store”, te recomiendo estudiar el tema donde hablamos específicamente de este componente.

Crear el Grid

Una vez que tenemos lista la información a desplegar en la tabla ya podemos comenzar a crear el grid de la siguiente manera:
var grid = new Ext.grid.GridPanel({
	store: store, //le asignamos la fuente de datos
	columns: [ //creamos las columnas
		new Ext.grid.RowNumberer(), //numeramos las filas
		{header:'Name', dataIndex:'name',sortable: true},
		{header:'Company', dataIndex:'company',sortable: true},
		{header:'Position', dataIndex:'position',width:230,sortable: true},
		{header:'Age', dataIndex:'age', width:40,sortable: true}
	],
	border: false, //le quitamos el borde
	stripeRows: true //le asignamos rayas a las filas
});
Con esa sencilla configuración creamos una tabla muy básica pero atractiva, ya hemos estudiado este código en el tema anterior, pero a manera de repaso voy a mencionar las propiedades utilizadas: “store”: En esta propiedad se define la fuente de datos a utilizar en el grid. “columns”: Se definen las columnas que tendrá el grid, esta parte es muy importante pues aquí se relacionan las columnas y su información a mostrar (dataIndex). “border”: Esta propiedad se hereda del componente Panel y al asignarle “false” le quitamos el borde exterior, esto lo hacemos porque vamos a meter el grid en una ventana. “stripeRows”: Nos permite ver unas rayas en las filas, esto hace que sea más fácil visualizar la información.

Crear la ventana

Por último vamos a meter el grid dentro de una ventana:
var win = new Ext.Window({
	title: 'Grid example',
	layout: 'fit', // <--- 
	width: 510,
	height:350,
	items: grid
});

win.show();
Lo único importante en esta configuración y que probablemente no sabemos (si hemos tomado este curso desde el principio) es la configuración “layout” a la cual le estamos asignando “fit”, esto es para que la tabla ocupe el cien por ciento de la ventana, de lo contrario el grid no se desplegará completamente, más adelante voy a tratar el tema de los layouts.
gridpanel

Si todo ha salido bien, veras esta pantalla

Conclusiones

Hemos visto lo sencillo que es desplegar información de un XML en un grid, además hemos apreciado la ingeniería con que está realizada la librería de Ext JS, porque la creación del grid es la misma para los diferentes formatos (XML, JSON, Array), lo único que hemos cambiado ha sido el “Store” y el grid funciona igual, esto es una ventaja en cuanto a el mantenimiento de sistemas se refiere. Si tienes dudas, comentarios o sugerencias por favor háznoslos llegar a través de los comentarios en este blog o si lo prefieres te puedes inscribir en el foro donde una comunidad muy activa está iniciando, además te invito a que te inscribas a las feeds o por correo para estar al tanto de las actualizaciones.

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?

11Comentarios

  • Avatar-8 jucahoca 02/07/2009

    Como crítica constructiva yo hubiera añadido al ejemplo el mapeo de algun dato que estuviera como atributo en el XML. Por ejemplo con lo cual quedaría como { name="age", mapping="@age", type="float"}

    • Avatar-5 jucahoca 02/07/2009

      Lo siento el ejemplo del xml no se ve, lo intento otra vez: &gt;person age="24"&lt;

      • Avatar-9 Crysfel 02/07/2009

        Gracias por el aporte, no decidí hacerlo porque eso ya lo he explicado antes (http://www.quizzpot.com/2009/04/leer-informacion-de-un-xml/) mas detalladamente ;) saludos

        • Avatar-5 Andres 19/01/2010

          Encuentro muy bueno el articulo, para quiénes estamos descubriendo los beneficios de Extjs... pero, hice el ejemplo, y tampoco me funciono el xml, no se ve... ¿Alguien sabe porque? Saludos

          • Avatar-5 Crysfel 19/01/2010

            Estas utilizando un servidor web? tienes definas las rutas a la librería de ExtJS correctamente? saludos

            • Avatar-2 ragdezyklon 17/05/2010

              Saludos amigo, como hago para conectar desde un boton en un formulario ajax a un archivo php que me generará un archivo xml?

              • Avatar-9 luna 15/10/2010

                hola, quisiera pedir ayuda con una agenda, hay q levantar un archivo xml q tiene da tos de personas, luego poder agregar otra pesona, borrar, editar , y poder recorrerlos datos de las personas en text, gracias...me estoy volviendo loca y no tengo ni idea, gracias.

                • Avatar-6 Robinson Vela 20/01/2011

                  Hasta ahora todos los ejemplos me han salido dado que he seguido desde el principio en donde se indican las configuraciones requeridas. Saludos Crysfel, hasta ahora muy provechoso para mi tu curso on-line. Robinson

                • Avatar-9 paul 30/03/2011

                  interesante realice lo mismo y si funciono ademas me puse ajugar con el ejemplo y logre lo que andaba buscando

                  • Avatar-4 Nathali 05/06/2012

                    tengo unos 200 filas y me sale un mensaje en él navegador de qué un script en ejecución, se demora mucho y debo darle clic en continuar para qué me muestre los datos estoy usando un grid editor a qué se debe este error por favor

                    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.