Blog

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.

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.

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.