Listados

Permiten mostrar datos en forma de listado a partir de una plantilla por defecto de tipo lista. Estos datos se obtienen directamente de un "store" y se mostrarán uno a uno en forma de listado según la plantilla definida en "itemTpl". Además incorpora funcionalidades para gestionar eventos como: itemtap, itemdoubletap, containertap, etc.

Utilizarlo es muy simple, solo tenemos que definir el "store" que queremos utilizar y la plantilla para cada uno de los elementos con "itemTpl", por ejemplo:

var myList = Ext.create('Ext.List', {
    fullscreen: true,
    store: {
        fields: ['firstName', 'lastName'],
        data: [
            {firstName: 'Pedro', lastName: 'García'},
            {firstName: 'Jorge', lastName: 'Sánchez'},
            {firstName: 'Sandra', lastName: 'Gallego'},
            {firstName: 'María', lastName: 'Pérez'}
        ]
    },
    itemTpl: '{firstName} {lastName}'
});

En el ejemplo anterior hemos creado el store a utilizar directamente dentro de la lista con un array de datos interno, pero también podríamos crear el store de datos por separado y conectarlo alguna fuente de datos local o remota (como se vio en la sección correspondiente):

var myList = Ext.create('Ext.List', {
    fullscreen: true,
    store: myStore,
    itemTpl: '{firstName} {lastName}'
});

El código del ejemplo generaría una aplicación como la siguiente:

Es muy importante diferenciar "itemTpl" de la propiedad "tpl" que ya habíamos visto (en las que usábamos los XTemplate). En "itemTpl" se procesa cada elemento del listado individualmente. Otra diferencia es que tenemos que utilizar como separador para la concatenación el símbolo de unión "+" y no la coma ",".

Esta lista ya la podemos mostrar directamente, sin la necesidad de incluirla en un contenedor, sin embargo, también podemos añadirla dentro de un panel en su sección items de la forma:

var myPanel = Ext.create('Ext.Panel', {
    layout: 'fit',
    items: [ myList ]
});

Nota: es posible que al asignar un listado a un panel no se visualice correctamente. En este caso tenemos que asegurarnos de eliminar la propiedad fullscreen tanto del listado como del panel y de asignar el layout: 'fit' al panel (y ningún layout al listado).

En el "store" debemos de utilizar la propiedad "sorters" para ordenar el listado, pues sino nos aparecerá desordenado. Por ejemplo, podríamos indicar (en el "store") que se ordene por el apellido "sorters: 'lastName'".

Obtener datos de la lista

Para obtener el almacén de datos asociado a un listado utilizamos su método getStore():

var notesStore = myList.getStore();

Una vez obtenido ya podemos realizar operaciones sobre él como añadir, modificar o eliminar algún registro (consultar sección correspondiente).

Actualizar datos

Si modificamos el almacén de datos asociado con el listado tendremos que actualizarlo para que se visualicen correctamente los nuevos datos en el listado. En primer lugar llamaremos al método sync() del store para sincronizar los cambios. A continuación, si es necesario, ordenamos los datos (pues el registro se habrá añadido al final). En el ejemplo se ordenan de forma descendente por fecha. Por último llamamos al método refresh() del listado para actualizar la vista.

notesStore.add( registro );

notesStore.sync();
notesStore.sort([{ property: 'date', direction: 'DESC'}]);
myList.refresh();

Agrupar elementos

Una propiedad muy útil que nos ofrecen los listados es la posibilidad de agrupar los elementos (como podemos ver en la imagen inferior). Para esto activaremos la propiedad "grouped: true" del listado y opcionalmente podremos indicar que se muestre una barra lateral de navegación "indexBar: true".

Pero para que esta propiedad funcione correctamente tendremos que indicar dentro del store la forma de agrupar los elementos. Tenemos dos opciones:

• groupField: 'campo' - para agrupar por un campo (por ejemplo: elementos de género masculino y femenino).

• getGroupString: function(instance) {...} - para agrupar usando una función. Esta opción es mucho más avanzada y nos permitirá agrupar, por ejemplo, usando la primera letra del apellido (como se muestra en la imagen de ejemplo).

Para obtener el resultado de la imagen de ejemplo anterior, el código quedaría como el siguiente:

var myStore = Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'localstorage',
        id: 'my-store-id'
    },
    autoLoad: true,
    sorters: 'apellido',
    getGroupString: function(instance) {
        return instance.get('apellido')[0];
    }
});

var myList = Ext.create('Ext.List', {
    fullscreen: true,
    store: myStore,
    grouped : true,
    indexBar: true,
    itemTpl: '{nombre} {apellido}'
});

Acciones

Para añadir acciones al presionar sobre un elemento del listado tenemos varias opciones:

• itemtap: permite realizar una acción al presionar sobre un elemento de la barra. Este evento lo debemos definir dentro de la sección "listeners" de nuestro Ext.List, de la forma:

  listeners: {
    itemtap: function(view, index, target, record) {
        alert( "tap on" + index );
    }
  }

  Donde el parámetro record representa el objeto sobre el que se ha pulsado. Este valor lo podríamos aprovechar para cargarlo directamente en un formulario o realizar alguna operación con él.

• itemdoubletap: permite realizar una acción al presionar dos veces consecutivas sobre un elemento. Este evento lo debemos definir dentro de la sección "listeners" de nuestro Ext.List, de la forma:

  listeners: {
    itemdoubletap: function(view, index, target, record){
        alert("doubletap on "+index);
    }
  }

  Donde el parámetro record representa el objeto sobre el que se ha pulsado.

• onItemDisclosure: Boolean / Función - esta propiedad admite diferentes valores. Si le indicamos el valor booleano "true" simplemente añadirá un icono con una flecha a la derecha de cada elemento (como podemos ver en la imagen inferior). En lugar de un valor booleano, podemos indicarle una función. En este caso, además de añadirse el icono en cada elemento, también se ejecutará la función cada vez que se presiones sobre dicho icono. Solo se capturará cuando se presione sobre el icono, no sobre toda la barra (como en el caso de itemtap). A continuación se incluye un ejemplo de uso:

  onItemDisclosure: function (record) { alert( "item disclosure" ); }

  Donde el parámetro record representa el objeto sobre el que se ha pulsado. En el siguiente código, al pulsar sobre un elemento de la lista se cargan los datos del elemento pulsado en un formulario (como veremos más adelante), y se cambia la vista para visualizar ese panel.

  onItemDisclosure: function( record )
  {
    myFormPanel.setRecord( record );
    panelPrincipal.animateActiveItem(
            myFormPanel,
            { type: 'slide', direction: 'left' });
  }