DataViews

Los Data Views nos permiten mostrar datos de forma personalizada mediante el uso de plantillas y opciones de formato. Principalmente se utilizan para mostrar datos provenientes de un store y aplicarles formato utilizando las plantillas "Ext.XTemplate", como hemos visto en la sección anterior. Además también proporcionan mecanismos para gestionar eventos como: click, doubleclick, mouseover, mouseout, etc., así como para permitir seleccionar los elementos mostrados (por medio de un "itemSelector").

En el siguiente ejemplo vamos a crear un DataView para mostrar el contenido de un store definido por separado y mediante la utilización de una plantilla también previamente definida usando Ext.XTemplate:

var myDataView = Ext.create('Ext.DataView', {
    fullscreen: true,
    store: myStore,
    tpl: myTpl
});

En este otro ejemplo creamos un DataView para mostrar el contenido de un store que incluimos dentro de la propia clase con un array de datos interno. Además utilizamos la propiedad itemTpl el lugar de tpl, lo que nos permite indicar el template de cada elemento o item del array directamente.

var myDataView = Ext.create('Ext.DataView', {
    fullscreen: true,
    store: {
        fields: ['name','age'],
        data: [
            {name:'Manuel', age:21},
            {name:'Pedro', age:56},
            {name:'Javi', age:36},
            {name:'Laura', age:57},
            {name:'Alfredo', age:11},
            {name:'María', age:12}
        ]
    },
    itemTpl: '{name} tiene {age} años'
});

Esta "vista de datos" podemos mostrarla en nuestra aplicación tal cual la hemos creado o también podemos añadirla a la sección items de un panel:

var myPanel = Ext.create('Ext.Panel', {
    fullscreen: true,
    items: [ myDataView ]
});