Información contenida en formato JSON Más videos
Comentarios: 22
Likes: 0 Persona
Duración: 0.0 minutos
Dificultad: Intermedio
Descripción del tema
El 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.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.
Instructor del curso
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.
22Comentarios
Podrás mandar por mail los archivos que faltan, tipo css y demás, se ve muy bien el ejemplo! Te felicito !!
Puedes descargarlos donde dice "descargar recursos", ahi viene todo lo necesario. saludos
todo el material es exelente
Excelente tutorial, desafortunadamente he tenido problemas al momento de listar, solo me aparece un solo registro de todos los ingresados. Que puede ser???
muy buen post master!!!
Hola Crysfel, tengo un problema estoy cargando en un grid datos que vienen en un json pero cuando trae acentos no los carga el grid que podrá ser ?
Hola estoy usando ext 3.1 hice los pasos de este ejemplo pero el store.load() no carga ningun registro, estoy mirando en la api del extjs y veo que este metodo recibe un objeto options, en la version 2.2, la llamada al metodo era sin argumentos?? gracias.
en la 2.x también podías pasarle ese objeto options, asegurate de asignarle la URL correcta, y que tu Record sea capaz de interpretar el contenido que recibe. saludos
hola que tal quisira sber como puede hacer una consulta desde el servidor y ese resultado ponerlo en un grid gracias
Gracias por los excelentes tutoriales, y para cargar datos de un query en mysql? agradesco la ayuda.
Hola Danae ... pudiste resolver el problema de los acentos? actualmente me pasa lo mismo, saludos
Para evitar problemas con los acentos y otro tipo de caracteres tienes que usar UTF-8 en todos lados!
Hola Crys excelente tutorial, he logrado cargar los datos al Grid desde una bd en PHP, pero al igual, quise ir mas alla agregando una consulta , pero la consulta la estoy mandando con un Ext.Ajax.request(Con sus respectivos parametros para la consulta) el cual le envio parametros, haciendo un trace con el Firebug veo que si me devuelve los valores Json, pero no se carga nada en el grid, estoy haciendo lo correcto enviar parametros desde el Ajax,request o los tengo que enviar directamente desde el jasonstore? Muchas gracias y espero tu respuesta.
Hola Crysfel, estoy trabajando con una DataView, y llenos los datos con php utilizando symfony. el problema es que cuando hago store.load(), solo puedo ver los datos y hacer consultas pero cuando kiero agregar efectos a los elementos del DataView me arroja un error, (estoy utilizando animated-Dataview.js para los efectos), el problema radica en que necesito cargar los datos con la funcion store.loadData(); pero no se como hacer eso; No se si alguien me podria ayudar para poder utiliza el store.loadData(); gracias.
Hola, estoy iniciando en esto de ajax, estoy siguiendo el tutorial pero tengo una duda que tal vez parezcca algo tonta, mencionas que debemos poner los archivos que descargamos dentro de una carpeta "grid", que previamente instale, donde esta eso que voy a instalar para que me aparezca esta carpeta? o es solo una carpeta que yo voy a crear?, te agradezco mucho
Michael Jackson Travolta: SI no es molestia, me podrías indicar como hiciste para cargar los datos de estel ejemplo desde php y mysql? Estoy tratando de aprender cómo hacerlo, hay muchos ejemplos que leen un array json desde un php pero quiero saber como hacerlo desde mysql. Gracias Pedro
pregunta y si quiero sacar un valor de JSON solamete, no en un grid. ej quiero sacar del 1 registro el valor del primer campo e imprimirlo en una ventana de mensaje? saludos
Entonces no usarías un store necesariamente, te recomendaría usar un Ext.Ajax.resquest para traer esa información y mostrarla en el lugar que gustes. Saludos
Hola, estoy realizando una aplicacion pero necesito filtrar un grid a partir de un array json que obtengo de la bd, pero no se como obtener los datos como tal que contiene el array json para mostrarlos
hola si alguien tiene el api de extjs 2.2 q me de un link para poderlo descargar, es q ya he buscado por la internet pero no aparece, gacias de antemano
Crysfel , necesito tomar el valor que viene un un arreglo JSON y despues ponerlo en un cuadro de texto. No tengo idea como hacerlo
Puedes hacer una llamada Ajax al server (Ext.Ajax.request), parsear el resultado (Ext.decode) en el callback y asignar el valor al textfield (textfield.setValue) Saludos