Ya vimos como generar un modelo para almacenar la información que necesitemos, en el tema de hoy veremos como manejar una colección de modelos, esta colección la usaremos para desplegar los resultados en el grid que ya tenemos definido en nuestra app.

Un Store es una simple colección de modelos, el Store nos permite almacenar la información temporalmente en memoria para poder desplegarla en nuestras vistas. Mediante un proxy podemos solicitar información vía ajax, jsonp, local storage, etc. Usamos un reader para poder interpretar la información en el formato enviado, por ejemplo JSON o XML.

Para comenzar vamos a crear el archivo app/store/Products.js, dentro del cual agregaremos el siguiente código.

Ext.define('Itunes.store.Products', {
    extend   : 'Ext.data.Store',        //Step 1
    requires : [
        'Itunes.model.Product'
    ],
    alias   : 'store.products',         //Step 2

    config   : {
        model : 'Itunes.model.Product'  //Step 3
    }
});

1. En el paso uno extendemos de la clase Store, esta clase es la responsable de manejar una colección de modelos de manera simple.
2. En el paso dos asignamos un alias a nuestro Store, esto nos permitirá crear instancias de manera lazy.
3. En el paso tres definimos la propiedad model para indicar el modelo que usaremos con este Store.

Proxies

Ya se mencionó que el proxy nos sirve para obtener la información de algún lugar, por ejemplo si usamos un proxy de tipo Ajax podemos hacer un request a nuestro servidor y recibir la información solicitada, luego el Store se encargará de crear los modelos de manera automática. En nuestro caso necesitamos un Store de tipo JSONP, esto es necesario porque necesitamos hacer una petición a los servidores de Apple.

Para configurar el proxy lo hacemos de la siguiente manera:

Ext.define('Itunes.store.Products', {

    //...

    config   : {
        model : 'Itunes.model.Product',
        proxy : {
            type        : 'jsonp',     //Step 1
            url         : 'https://itunes.apple.com/search', //Step 2
            callbackKey : 'callback'   //Step 3
        }
    }
});

1.  Mediante la propiedad proxy podemos definir un objeto que contenga las configuraciones del proxy a crear, en este caso creamos uno de tipo jsonp.
2. En el paso dos definimos la URL a donde vamos a realizar la petición, aquí definimos el API de Itunes.
3. El paso tres no es requerido pero en ocasiones es necesario, y es para cuando queremos cambiar el nombre del parámetro que define el callback. En este caso el API de Itunes espera que se llama callback, pero posiblemente alguna otra API tendrá un nombre diferente, entonces aquí es donde podemos configurarlo.

Readers

Hasta ahora nuestro Store puede realizar peticiones a la URL que configuramos, pero para que pueda interpretar la información recibida y crear los modelos automáticamente, necesitamos definir algunas configuraciones más.

Ext.define('Itunes.store.Products', {
   
   //...

    config   : {
        model : 'Itunes.model.Product',
        proxy : {

            //...

            reader      : {              //Step 1
                type        : 'json',    //Step 2
                rootProperty: 'results'  //Step 3
            }
        }
    }
});

1. En el paso uno definimos la propiedad reader, esta propiedad nos permite definir un objeto con las configuraciones que tendrá el reader, en Sencha Touch tenemos tres readers disponibles para leer JSON, XML y Arrays.
2. En el paso dos definimos que usaremos un reader de tipo JSON, esto porque el API de Itunes nos está regresando la información en formato JSON.
3. En el paso tres indicamos donde está alojada la información con la que se llenarán los modelos, en este caso el API de Itunes envía la información en un arreglo llamado results.

Manipulando el Store

El Store cuenta con algunos métodos para manejar la información de la manera más sencilla posible, tenemos algunos métodos para filtrar y buscar, también para ordenar ascendente y descendentemente, podemos iterar la colección, agregar y eliminar modelos, así como realizar peticiones para traer nueva información usando el proxy.

Vamos a ejecutar el siguiente código en la consola de nuestro navegador para hacer algunos experimentos.

Primero vamos a crear una instancia del store:

var store = Ext.create('Itunes.store.Products');

Segundo vamos a realizar una petición al API de Itunes para tener información con la cual jugar un poco.

store.setParams({term:'maroon'}); //Step 1
store.load();   //Step 2

1. En el código anterior asignamos los parámetros a enviar en la próxima petición, en este caso queremos enviar el parámetro term, con la búsqueda que queremos realizar. Podemos enviar los parámetros que queramos, eso dependerá del API con el que estemos trabajando, revisa la documentación para ver todos los parámetros que podemos enviar.
2. Enseguida hacemos el request mediante el método load, esto dispara una petición HTTP asíncrona al API de Itunes con los parámetros previamente definidos.

Para iterar los modelos podemos usar el método each de la siguiente manera:

store.each(function(model,index){           //Step 1
     console.log(model.get('name'));  //Step 2
});

1. El método each recibe una función que se ejecutará por cada elemento en el Store, como parámetro recibe el modelo y el índice.
2. En el paso dos simplemente hacemos un log del campo name que tenemos en el modelo, esto permitirá que se impriman todos los nombres en la colección.

Para order usamos el método sort de la siguiente manera:

store.sort('name','ASC');
store.sort('name','DESC');

Así es como ordenamos por el campo name de manera ascendente o descendente, podemos usar cualquier campo del modelo definido. Ahora bien, si quisiera ordenar por dos campos de manera simultanea lo hacemos usando un arreglo de la siguiente manera.

store.sort([{
        property : 'name',
        direction: 'ASC'
    },{
        property : 'price',
        direction: 'DESC'
    }
]);

En el ejemplo anterior ordenamos de manera ascendente por nombre y de manera descendente por el precio.

Experimenta

Intenta filtrar la información usando el método filter, te recomiendo revisar la documentación del Store para revisar como funciona ese método, también revisa todos los métodos disponibles para familiarizarte con esta clase.

Si has venido usando GIT es el momento de guardar nuestros cambios en el historial.

$ git add .
$ git commit -m 'Adding the store'

Ya vimos que con el proxy y el reader definido estamos listos para hacer peticiones al API de Itunes, en el siguiente tema veremos como integrar este Store al grid que definimos en temas pasados.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Tu primera app con Sencha Touch, 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!