Blog

Este tutorial es muy semejante al anterior donde vimos como cargar información desde un archivo XML, lo único que cambiaremos con respecto al tutorial anterior es el registro donde se especifica la información que tendrá y el “reader” para que sea capaz de leer el JSON regresado por el servidor.

Material de apoyo

Vamos a descargar el material de apoyo, lo descomprimimos y copiamos dentro de la carpeta “grid” en nuestro servidor Web previamente instalado.

Empaquetando el tutorial

Como siempre hemos hecho en este curso, vamos a “empaquetar” el código que usaremos, recuerden que esto es fundamental y muy importante, realmente nunca me cansaré de decir esto.

Ext.ns('com.quizzpot.tutorial');

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

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

El JSON a utilizar

Ahora vamos a definir la información que desplegará el grid, por cuestiones de simplicidad voy a escribir la información directamente en el código, pero les recuerdo que esta información puede estar en una base de datos, un archivo de texto, un servicio Web (Web Service) o provenir de cualquier otro lugar, por ahora está “hardcoded”.

<?php
	header("Content-Type: text/plain"); 

	$data = array(
		'success'=>true,
		'total'=>11,
		'data'=>array(
			array('city'=>'Mexico city','visits'=>684,'pageVisits'=>4.11,'averageTime'=>'00:06:53'),
			array('city'=>'La Victoria','visits'=>443,'pageVisits'=>4.39,'averageTime'=>'00:07:28'),
			array('city'=>'Madrid','visits'=>380,'pageVisits'=>3.11,'averageTime'=>'00:05:22'),
			array('city'=>'Providencia','visits'=>204,'pageVisits'=>3.83,'averageTime'=>'00:08:20'),
			array('city'=>'Bogota','visits'=>204,'pageVisits'=>3.26,'averageTime'=>'00:04:57'),
			array('city'=>'Puerto Madero','visits'=>192,'pageVisits'=>3.56,'averageTime'=>'00:05:07'),
			array('city'=>'Monterrey','visits'=>174,'pageVisits'=>3.90,'averageTime'=>'00:06:06'),
			array('city'=>'Barcelona','visits'=>145,'pageVisits'=>3.28,'averageTime'=>'00:05:39'),
			array('city'=>'Caracas','visits'=>132,'pageVisits'=>4.55,'averageTime'=>'00:06:27'),
			array('city'=>'Rosario','visits'=>116,'pageVisits'=>2.44,'averageTime'=>'00:04:30'),
			array('city'=>'Oaxaca','visits'=>108,'pageVisits'=>1.73,'averageTime'=>'00:02:37')
		)
	);

	echo json_encode($data);
?>

Crear el “Record”

Una vez definido el formato con el cual será entregada la información al cliente (por medio de AJAX), podemos crear el “Record” que desplegaremos en la tabla.

var Record = Ext.data.Record.create([
	{name: 'city'},
	{name: 'visits', type:'float'},
	{name: 'pageVisits', type:'float'},
	{name: 'averageTime'}
]);

El código anterior ya debe ser conocido por nosotros, pues lo hemos repasado en temas anteriores, básicamente creamos un “registro” con los campos que necesitamos desplegar y que son entregados por el servidor, además definimos (en algunos casos) el tipo de información del campo.

Crear el “Reader”

Ahora vamos a escribir el “Reader” para que el store pueda interpretar la información que se nos entrega en formato JSON.

var reader = new Ext.data.JsonReader({
   totalRecords: "total",
   root: "data"
}, Record);

Para este caso utilizamos el componente “JsonReader” y le configuramos el campo donde se encuentra el total de registros y el “root” donde viene la información principal.

Crear el Store y cargar la información

Lo siguiente es crear el store que se encargará de contener localmente la información para poder ser manipulada por el grid.

var store = new Ext.data.Store({
	url: 'gridjson.php',
	reader: reader
});

store.load();

Puedes ver que se ha configurado la “url” donde solicitará por medio de Ajax la información a contener, además le hemos asignado el “Reader” que creamos anteriormente, por último hacemos un “load”.

Ahorrando algunas líneas de código

Hasta ahora lo único que hemos hecho es ir por la información al servidor y contenerla dentro del store, todas las líneas anteriores de código pueden ser reducidas considerablemente de la siguiente manera:

var store = new Ext.data.JsonStore({
	url: 'gridjson.php',
	root: 'data',
	fields: ['city',{name:'visits',type:'float'},{name:'pageVisits',type:'float'},'averageTime']
});

store.load();

Con las líneas anteriores hacemos exactamente lo mismo que hicimos anteriormente, esto es conveniente cuando utilizamos JSON como formato de transferencia de información, así que la decisión de realizarlo de una u otra manera queda a consideración del desarrollador.

Crear el Grid

Vamos a crear el grid que desplegará la información contenida en el store que creamos anteriormente.

var grid = new Ext.grid.GridPanel({
	store: store, // <--- le asignamos el store con la información a utilizar
	columns: [
		new Ext.grid.RowNumberer(),
		{header:'City', dataIndex:'city',sortable: true},
		{header:'Visits', dataIndex:'visits',sortable: true},
		{header:'Page/Visits', dataIndex:'pageVisits',sortable: true},
		{header:'Average Time', dataIndex:'averageTime', width:150,sortable: true}
	],
	border: false,
	stripeRows: true
});

Aquí no estamos haciendo nada en especial, solamente le asignamos el store que utilizará, definimos las columnas y a cada una le asignamos una propiedad del “Record” en el store, además creamos una columna donde se numeran las filas, le quitamos el borde para que al introducir la tabla a una ventana se vea bien, y le agregamos líneas alternadas en las filas.

Desplegar el grid

Existen varias alternativas para desplegar el grid en la pantalla, en esta ocasión vamos a utilizar una ventana.

var win = new Ext.Window({
	title: 'Grid example',
	layout: 'fit',
	width: 510,
	height:350,
	items: grid
});

win.show();

Si actualizamos el explorador veremos algo como la siguiente imagen.

Conclusiones

Hasta ahora solamente hemos visto como desplegar la información en diferentes formatos, esto es realmente sencillo. En el siguiente capitulo veremos como paginar esta información, cada vez se pone mas interesante este curso por lo tanto no olviden inscribirse a las Feeds o por email, además recuerden que utilizamos Twitter (quizzpot) para mostrar las actualizaciones y lo que estamos haciendo en Quizzpot.

Si tienes alguna duda o sugerencia puedes dejarnos tus comentarios o inscribirte en el foro donde poco a poco va creciendo la comunidad.