Información contenida en formato JSON
Jul 06, 2009 | Español | By Crysfel | 19 CommentsEl día de hoy quiero mostrar como cargar información contenida en formato JSON en un “Grid”, es realmente sencillo y básico, pero creo que es importante mencionarlo para aquellos que están empezando a trabajar con esta librería.
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.
Imagen final
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.
Imagen final
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.





Commercial ExtJs and Sencha Touch Themes


Podrás mandar por mail los archivos que faltan, tipo css y demás, se ve muy bien el ejemplo! Te felicito !!