usando dataviews en sencha touch

http://www.extjs.mx/2011/12/22/usando-dataviews-en-sencha-touch/

Un DataView es la manera de desplegar los registros de una aplicación con estilos particulares y dinámicamente basados en las capacidades de un Store. Es ideal para mostrar mucha información y datos del servidor o cualquier otra fuente de datos y es la base de otros componentes como el Ext.List.

Un DataView es un componente muy util en aplicaciones que requieren por ejemplo de las siguientes capacidades:

  • Listar los mensajes de una aplicación de emails
  • Mostrar las ultimas noticias o tweets
  • Colección de recuadros para desplegar los albunes de fotos o albúmenes de un usuario o reproductor de música

Creando un DataView

En pocas palabras un DataView es un Store de datos y un Template (estilo prediseñado) que utilizamos para desplegar cada uno de los registros, por ejemplo:

  1. var equipo = Ext.create(‘Ext.DataView’, {
  2.     store: {
  3.         fields: [‘nombre’, ‘edad’],
  4.         data: [
  5.             { nombre: ‘Jamie Avins’,  edad: 100},
  6.             { nombre: ‘Rob Dougan’,   edad: 21},
  7.             { nombre: ‘Tommy Maintz’, edad: 24},
  8.             { nombre: ‘Jacky Nguyen’, edad: 24},
  9.             { nombre: ‘Ed Spencer’,   edad: 26}
  10.         ]
  11.     },
  12.     itemConfig: {
  13.         tpl: ‘Mi es {nombre} y tengo { edad }años’
  14.     }
  15. });

En este ejemplo definimos todos los datos en duro (localmente) y no con datos remotos traídos de un servidor. Para cada uno de los 5 registros definidos en el Store, el DataView desplegara un componente pasándole el dato de nombre y edad. El componente utilizara el template (tpl) que se proporciono arriba y dibujara los datos remplazándolos por las variables entre llaves.


Debido a que el DataView integra internamente el Store, cualquier cambio en los datos del Store se ven inmediatamente reflejados en pantalla. Por ejemplo, si agregamos un nuevo registro al Store, será desplegado en pantalla lo antes posible:

  1. equipo.getStore().add({
  2.     nombre: ‘Abe Elias’,
  3.     edad: 33
  4. });

No es necesario hacer una actualizacion manual, todo el control ya es automatico. Lo mismo pasara si modificamos alguno de los registros que ya existian:

  1. equipo.getStore().getAt(0).set(‘edad’, 42);

Esto tomara el primer registros en el Store (Jamie), y cambiara la edad a 42 y automáticamente actualizara los datos en pantalla.

Cargando datos de un servidor

Regularmente lo que requieren la mayoría de las aplicaciones es cargar los datos de un servidor o quizás otro servicio Web disponible y no necesariamente tener los datos definidos localmente como nuestro ejemplo anterior. Digamos que queremos cargar los últimos tweets de Sencha Touch en un DataView, y para cada uno de ellos queremos mostrar la foto del usuario, su nombre y su mensaje. Para hacer esto, todo lo que tenemos que hacer es modificar el Store y la propiedad itemConfig:

  1. Ext.create(‘Ext.DataView’, {
  2.     fullscreen: true,//pantalla completa
  3.     store: {
  4.         autoLoad: true,//automaicamente cargar el store
  5.         fields: [‘from_user’, ‘text’, ‘profile_image_url’],
  6.         proxy: {
  7.             type: ‘jsonp’,
  8.             url: ‘http://search.twitter.com/search.json?q=Sencha Touch’,
  9.             reader: {
  10.                 type: ‘json’,
  11.                 root: ‘results’
  12.             }
  13.         }
  14.     },
  15.     itemConfig: {
  16.         tpl: ‘<img src=”{profile_image_url}”><h2><cufon style=”width: 141px; height: 30px;” alt=”{from_user}” class=”cufon cufon-canvas”><canvas style=”width: 169px; height: 32px; top: -1px; left: -4px;” height=”32″ width=”169″></canvas><cufontext>{from_user}</cufontext></cufon></h2><p>{text}</p>’
  17.     }
  18. });

De esta manera el Store no tendrá datos locales (en duro), proporcionamos un Proxy, el cual carga los datos por nosotros. En este caso, utilizamos un proxy de JSON-P proxy para poder traer la informacion con el API JSON-P de Twitter’s. También definimos los campos presentes en cada tweet, y el store utiliza la configuración autoLoad para cargarse automáticamente. Finalmente, configuramos un Reader (interprete) para decodificar la respuesta de Twitter, diciéndole que esperamos la respuesta en formato JSON y asi podemos esperar los tweets como en la variable ‘results’ como parte de la misma respuesta.

La ultima configuración realizada es el template para desplegar la imagen, el nombre de usuario y el mensaje. Todo lo necesario es un poco de CSS de la manera que queramos.