Proxy

Los proxies se utilizan para definir la forma de leer y escribir la información. Dependiendo del proxy que utilicemos podremos almacenar los datos de forma local o de forma remota. Además, estos pueden ser definidos tanto en el data store como en el data model.

Los posibles proxies u opciones de almacenamiento que podemos usar son:

• Almacenamiento en local:

  • Memoria (memory): almacenar los datos en memoria.

  • Local Storage (localstorage): almacenar los datos usando la nueva característica de HTML5 de almacenamiento en local.

  • Session Storage (sessionstorage): almacenar los datos usando la nueva característica de HTML5 de almacenamiento en local pero por sesión (al cerrar la sesión se borrarán los datos).

  • SQL (sql): almacenar los datos usando la nueva característica de HTML5 de almacenamiento en una base de datos local de tipo WebSQL.

• Almacenamiento en remoto:

  • Ajax (ajax): Genera peticiones ajax para cargar o enviar los datos a un servidor.

  • JsonP (jsonp): JSONP o JSON con padding es una técnica de comunicación utilizada para realizar llamadas asíncronas a dominios diferentes y de esta forma evitar los errores por peticiones cross-domain.

  • Rest (rest): Especialización del proxy ajax para realizar peticiones a un servidor RESTful.

A continuación se tratarán las posibles formas de definición de un proxy y algunos ejemplos de uso usando los tipos ajax, localstorage y rest.

Definir el proxy en el Data Store

En un Data Store, además de definir el modelo asociado, podemos definir el proxy a utilizar. En el siguiente ejemplo se configura un proxy de tipo ajax, además se le proporciona la url con la dirección para acceder a los datos y la propiedad reader para especificar el tipo de datos con los que tiene que trabajar.

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: 'json'
    },
    autoLoad: true
});

Además hemos añadido la propiedad autoLoad: true para que se carguen los datos al inicio desde el proxy indicado. Si no lo hiciéramos así el store inicialmente estaría vacío, aunque también podríamos cargarlos utilizando el método myStore.load().

La propiedad reader especifica la forma de codificar / decodificar los datos. En este caso se ha especificado el tipo json, pero Sencha Touch admite también el tipo xml.

Al cargar la aplicación con el store del ejemplo se auto-descargarían los datos desde la URL indicada. A continuación, y según tiene definido el store, espera recibir un objeto JSON con un array de datos con los mismos campos que el modelo User asociado. El formato de los datos en JSON debería ser similar al siguiente:

{
    success: true,
    users: [
        { id: 1, name: 'Greg' },
        { id: 2, name: 'Seth' }
    ]
}

En caso de que la raíz de los datos del array fuese distinta podríamos indicarlo configurando el reader de la forma:

    ...
    proxy: {
        type: 'ajax',
        url : 'users.json',
        reader: {
            type: 'json',
            root: 'usersList'
        }
    }

Definir el proxy en el Data Model

El proxy también se puede definir directamente en el modelo de datos, lo cual tiene dos beneficios. Primero, si el modelo se utiliza en varios stores solo se tendrá que especificar una vez la configuración del proxy. Y segundo, podremos cargar datos y guardarlos sin necesidad de referenciar el store.

En el siguiente ejemplo se puede ver como definir un proxy directamente en el modelo (las opciones de configuración son exactamente las mismas que si lo hiciéramos en el store):

Ext.define('User', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['id', 'name', 'age', 'gender'],
        proxy: {
            type: 'rest',
            url : 'data/users',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    }
});

// Definimos el store y lo asociamos, el cual ya tendrá configurado el proxy
var myStore = Ext.create('Ext.data.Store', {
    model: 'User'
});

En este otro ejemplo se muestra como guardar y cargar datos directamente desde el modelo que hemos creado en el ejemplo anterior:

// Crear un usuario
var item = Ext.create('User', {
    name: 'Bilbo Bolsón',
    age : 111
});

// Almacenar el usuario creado. Esto enviará una petición tipo POST
// a la ruta "/users", ya que tiene definido un proxy tipo rest.
item.save({
    success: function(item) {
        console.log("El usuario se ha guardado con ID: "+ item.getId());
    }
});

// Obtener una referencia al modelo User
var User = Ext.ModelMgr.getModel('User');

// Cargar el usuario con id = 1
User.load(1, {
    success: function(user) {
        console.log("Usuario 1 con nombre: " + user.get('name'));
    }
});

Almacenamiento en local con localstorage

Para este tipo de almacenamiento, el proxy utiliza la nueva funcionalidad de HTML5 de almacenamiento en local. Esta opción es muy útil para almacenar información sin la necesidad de utilizar un servidor. Sin embargo solo podremos guardar pares clave-valor, no soporta objetos complejos como JSON (JavaScript Object Notation).

Al usar almacenamiento en local es muy importante que el modelo de datos tenga un "id" único, que por defecto tendrá ese nombre de campo (id); en caso de utilizar otro lo podríamos indicar mediante la propiedad "idProperty: 'myID'" del modelo.

Para que el proxy utilice el almacenamiento en local simplemente tendremos que indicar el tipo (type: 'localstorage') y un identificador (id, usado como clave para guardar los datos). En el siguiente ejemplo se crea un almacén de datos para el modelo "User" que hemos definido en las secciones anteriores.

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'localstorage',
        id: 'my-store-id'
    },
    autoLoad: true
});