En el tutorial anterior definimos eventos para realizar acciones cuando suceda alguna interacción por parte del usuario, en este tema veremos como podemos acceder a los componentes visuales para poder manipularlos por medio de referencias.

En Sencha Touch podemos crear referencias para acceder a nuestras vistas por medio de selectores, estos selectores son muy semejantes a los de CSS, si quieres aprender a utilizarlos de una mejor manera te recomiendo revisar el tutorial sobre selectores en Ext JS, que funciona de la misma manera en Sencha Touch.

Para crear una referencia es bastante sencillo, en el controlador que ya tenemos vamos a agregar el siguiente código.

Ext.define('Itunes.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs    : {               //Step 1
            grid: 'main results'  //Step 2
        },
        control : {
            'header textfield' : {
                'action'     : 'onSearch'
            } 
        }
    },

    //...
});

1. En el paso uno definimos la propiedad refs, esta propiedad recibe un objeto donde vamos a definir todas las referencias que necesitamos.
2. En el paso dos es donde definimos todas las referencias necesarias, primero definimos el nombre que le daremos a la referencia, en este caso grid, y luego definimos el selector que buscará y guardará la referencia.

Una vez que tenemos la referencia podemos utilizarla de la siguiente manera.

Ext.define('Itunes.controller.Main', {
    extend: 'Ext.app.Controller',

    config: {
        refs    : {
            grid: 'main results'
        },

        //...
    },

    onSearch    : function(field,e){
        var grid = this.getGrid();
    }
});

 Cada que definimos una referencia se crea automáticamente un método get + Referencia, en este caso getGrid, este método regresa la instancia del componente que definimos en el selector. Si definieramos una referencia llamada search, el método a generarse será getSearch.

Una vez que sabemos como acceder a las referencias podemos utilizar cualquier método definido en ese componente, en este caso necesitamos acceder al store del grid para realizar la nueva búsqueda.

onSearch    : function(field,e){
    var grid = this.getGrid();

    grid.getStore().setParams({term: field.getValue()}); //Step 1
    grid.getStore().load();                              //Step 2
}

1. En el paso uno asignamos el parámetro term al store del grid, este parámetro es requerido por el API de Itunes y es el que indica lo que buscaremos.
2. En el paso dos hacemos el load del store, con esto realizamos la petición al API de Itunes. 

Con esto es suficiente para poder realizar las búsquedas desde la caja de texto, cada vez que el usuario presione la tecla Enter, la búsqueda se hará en ese instante.

Uso de referencias en Sencha Touch

De manera semejante vamos a hacer todas las acciones que necesitemos, para esta aplicación necesitamos escuchar el evento tap sobre el grid, sobre los filtros, botones, etc.

Intenta agregar algunos otros listeners a nuestra app, revisa el tutorial anterior si tienes dudas con respecto al uso de eventos en los controladores.

En el siguiente tutorial veremos como filtrar la información de los resultados, usaremos la misma referencia del grid, agregando un nuevo listener. 

Recuerda compartir este tutorial en tus redes sociales, si tienes dudas puedes visitar los foros, también puedes descargar el código fuente y ver el demo de este paso.

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!