Utilizando fechas y tiempo en un Grid Más videos
Descripción del tema
Ejercicio final
Material de apoyo
Antes de continuar adelante es necesario descargar el material de apoyo y copiar los archivos al servidor Web que instalamos al inicio de este curso.Información a mostrar
La información que desplegaremos en el Grid se muestra a continuación:<?php header("Content-Type: text/plain"); $data = array( array('name'=>'John Doe','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Crysfel','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Sasha','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Peter','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Carl','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Ronaldo','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Jenny','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Gina','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')), array('name'=>'Eddy','from'=>randomDate('m-d-Y'),'to'=> randomDate('j-M-Y'),'time'=>randomDate('h:i:s a'),'iso'=>randomDate('c'),'unix'=>randomDate('U')) ); $response = array( 'success'=>true, 'total'=>count($data), 'data'=> $data ); echo json_encode($response); function randomDate($format){ return date($format,rand(0,time())); } ?>Como se pueden dar cuenta se están generando las fechas de manera aleatoria, así que no esperen ver las mismas fechas siempre, lo único que es constante es el nombre de las personas. También es importante notar que las fechas son generadas en diferentes formatos, puedes ver que también usamos el formato de “unix”, especificando los segundos transcurridos a partir del 1ro de enero de 1970.
Namespace
Una vez definida la información vamos a comenzar a trabajar del lado de cliente, por lo tanto necesitamos definir el espacio de nombre que usaremos para este tutorial.Ext.ns('com.quizzpot.tutorial'); com.quizzpot.tutorial.DatesTutorial = { init: function(){ //el código va aqui } } Ext.onReady(com.quizzpot.tutorial.DatesTutorial.init,com.quizzpot.tutorial.DatesTutorial);Ya sabemos el por qué de utilizar un namespace robusto, si no lo recuerdas te sugiero repasar el tema correspondiente.
Crear el Store y el Grid
Vamos a crear el Store capaz de procesar la información regresada por el servidor, la cual esta en formato JSON.var store = new Ext.data.JsonStore({ url: 'dates.php', root: 'data', totalProperty: 'total', fields: [ 'name', 'from', 'to', 'time', 'iso', 'unix' ] }); store.load();El código anterior ya lo conocemos muy bien, lo hemos estudiado reiteradamente en los temas anteriores, no tiene nada especial, ahora vamos a crear la tabla e introducirla dentro de una ventana de la siguiente manera:
var grid = new Ext.grid.GridPanel({ store: store, columns: [ new Ext.grid.RowNumberer(), {header:'Name', dataIndex:'name',sortable: true}, {header:'From', dataIndex:'from',sortable: true}, {header:'To', dataIndex:'to',sortable: true}, {header:'Time', dataIndex:'time',sortable: true}, {header:'From ISO date', dataIndex:'iso',sortable: true}, {header:'From Unix Time', dataIndex:'unix',sortable: true} ], viewConfig: { forceFit: true }, border: false, stripeRows: true }); var win = new Ext.Window({ title: 'Grid example', layout: 'fit', width: 510, height:350, items: grid }); win.show();Lo único que es importante resaltar en el código anterior es que estamos usando la propiedad “viewConfig”, esta propiedad nos permite configurar el “view” del grid que estamos creando, para este caso solamente estamos forzando a las columnas que se distribuyan sobre el grid para que todas sean mostradas.
Un grid con configuraciones comunes
Problemas con el manejo de las fechas y tiempos
Si lo han notado, por alguna extraña razón no está apareciendo la información de una de las columnas, además si ordenamos ascendente o descendentemente alguna de las columnas que muestran una fecha o tiempo, no se ordenan correctamente.Errores al ordenar las columnas de fecha y tiempo
No ordena correctamente la hora
Solución al problema de ordenación
Para solucionar los problemas anteriores y dar un formato más entendible para el usuario necesitamos definir en el “Store” que usaremos, los campos de tipo “date”.var store = new Ext.data.JsonStore({ url: 'dates.php', root: 'data', totalProperty: 'total', fields: [ 'name', {name:'from', type:'date'}, {name:'to', type:'date'}, {name:'time', type:'date'}, {name:'iso', type:'date'}, {name:'unix', type:'date'} ] }); store.load();Si actualizamos la página veremos que ocurre algo inesperado:
Se pierde la información de las columnas
var store = new Ext.data.JsonStore({ url: 'dates.php', root: 'data', totalProperty: 'total', fields: [ 'name', {name:'from', type:'date', dateFormat:'m-d-Y'}, {name:'to', type:'date', dateFormat:'j-M-Y'}, {name:'time', type:'date', dateFormat:'h:i:s a'}, {name:'iso', type:'date', dateFormat:'c'}, {name:'unix', type:'date', dateFormat:'U'} ] }); store.load();Si actualizamos el navegador donde estamos trabajando veremos algo semejante a la siguiente imagen.
Fechas en formato ISO
Cambiar el formato de las celdas
Ya sabemos que por medio de la propiedad “renderer” de las columnas podemos cambiar el contenido de las celdas, así que vamos a modificar el formato con el que se está mostrando las fechas utilizando una utilería del Framework.var grid = new Ext.grid.GridPanel({ store: store, columns: [ new Ext.grid.RowNumberer(), {header:'Name', dataIndex:'name',sortable: true}, {header:'From', dataIndex:'from',sortable: true, renderer: Ext.util.Format.dateRenderer('M/Y')}, {header:'To', dataIndex:'to',sortable: true, renderer: Ext.util.Format.dateRenderer('M/Y')}, {header:'Time', dataIndex:'time',sortable: true, renderer: Ext.util.Format.dateRenderer('h:i:s a')}, {header:'From ISO date', dataIndex:'iso',sortable: true, renderer: Ext.util.Format.dateRenderer('D d M')}, {header:'From Unix Time', dataIndex:'unix',sortable: true, renderer: Ext.util.Format.dateRenderer('M \'y')} ], viewConfig: { forceFit: true }, border: false, stripeRows: true });Utilizando el método “dateRenderer” del objeto “Ext.util.Format” podemos cambiar el formato de una manera muy sencilla, así no creamos una función para cada columna, simplemente definimos el formato que necesitamos.
Formato correcto en el grid
Conclusiones
Es muy común que cuando trabajamos con fechas sucedan los errores que vimos, he recibido muchos comentarios solicitando ayuda con respecto a este tema, es por eso que creo que es importante despejar todas estas dudas. Si tienes dudas con respecto a este tema te invito a unirte al foro y participar activamente, también recuerda seguirnos en Twitter (@quizzpot) para estar pendiente de las actualizaciones, tratamos de publicar contenidos frecuentemente así que una buena idea es inscribirte a las Feeds en tu lector de RSS preferido o recibe las actualizaciones mediante correo electrónico.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.
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.
14Comentarios
Excelente como siempre!! Gracias
Ejemplos buenos y muy claros. Gracias
Perfecto, fuerte y claro.gracias de nuevo
Lo he intentado con jsp, utilizando la clase SimpleDateFormat para emular las fechas devueltas mediante php como se hace en el tutorial, al principio me funciona bien, pero ha medida que voy aplicando los formatos de Ext js hace cosas bastante raras, digamos que con JSP se invierte lo que pasa con PHP.
y si estás enviando los formatos correctos? si quieres pon tu código en el foro (http://foro.quizzpot.com) Saludos
Hola, me ha parecido genial el sitio y me preguntaba si existe alguna manera de recargar los datos del Grid cada cierto tiempo. Me gustaria actualizar mi info cada vez que algo cambia en mi base de datos. Agradecería consejos o algún ejemplo. Saludos
Crysfel, quería molestarte con una pregunta, y lo que sicede es que aunque aparentemente tengo bien mi código pues me carga los datos en formato m/d/Y y no d/m/Y como quisiera que sucediera...asi esta mi código: var userColumns = [ {header: "ID", width: 40, sortable: true, dataIndex: 'id'}, {header: "Nombre", width: 100, sortable: true, dataIndex: 'nombre', editor: textField}, { header: "Fecha", width: 50, sortable: true, dataIndex: 'fecha', editor: dateField, locked: false, renderer: Ext.util.Format.dateRenderer('m/d/Y') }, {header: "Hora", width: 50, sortable: true, dataIndex: 'hora', editor: timeField, increment: 5, format: 'H:i'} ]; ...asi que no entiendo por que sucede y cuando quito la línea "renderer: Ext.util.Format.dateRenderer('m/d/Y')", me cargan bien pero se me desordena de nuevo cuando intent editar el campo directamente en el grid, gracias
Quitale el renderer y agregale xtype : 'datecolumn', format : 'd/m/Y', de tal manera que quede asi: var userColumns = [ {header: "ID", width: 40, sortable: true, dataIndex: 'id'}, {header: "Nombre", width: 100, sortable: true, dataIndex: 'nombre', editor: textField}, { header: "Fecha", width: 50, sortable: true, dataIndex: 'fecha', xtype : 'datecolumn', format : 'd/m/Y', editor: dateField, locked: false }, {header: "Hora", width: 50, sortable: true, dataIndex: 'hora', editor: timeField, increment: 5, format: 'H:i'} ];
Hola, tengo un problema, cuando intento recuperar datos en un grid para fecha en el format: d/m/Y me sale menos 1 el día, en mi BD tengo 15-01-2011, en el grid sale: 14-01-2011, ¿a que se debe ese problema?
hola , ami me esta pasando lo mismo, pudiste solucionarlo?
bueno yo tambien tengo el lio con que me manda la fecha con un dia menos por favor derrepente alguien logro solucionar dicho problema
No hay modo de que se visualice en mi grid el campo created_at de mi tabla document. Por supuesto se autogenera cuando construyo la bd a partir de mi schema. se que carga los datos bien, solo que no me muestra nada,si puediesen darme una respuesta me seria de gran ayuda. Saludos carlos
Estimados colegas Soy profesor de la Universidad y casi me jubilo, y en unos días gracia a la ayuda que ustedes me han brindado con su curso he podido ayudar al hijo de un amigo, no tengo con que pagarle esta ayuda, si le digo que su curso está muy interesante y sobre todo metódico, hace a uno reflexionar de las informaciones que usted brinda. Los ejemplos magnificos, hacia creo que hace 15 años que no tenia que ponerme a aprender programación y he vuelto a recordar lo aprendido gracia a lo que he podido bajar de ustedes. Se que no me pueden suministrar más información, lo entiendo y le doy las gracias un amigo que desde Cuba lo admira.
Hola Juan, me alegra saber que te ha servido este curso, un saludo!