Ext.view.View and Data

It's SUPER IMPORTANT to associate data with the store. If you specify data here it is provided to the tpl, but not properly bound to the store. Unless the store knows about the data itemclick events won't work.

HTML

<link rel="stylesheet" href="https://static.xero.com/content/2.20/xero.css">
<div id="container"></div>

CSS

.x-dataview-item {
    padding: 14px 10px 11px 7px;
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    line-height: 1.2;
}

JavaScript

var store = Ext.create('Ext.data.Store', {
    fields: ['id', 'name'],
    data: [
        { id: 1, name: 'One' },
        { id: 2, name: 'Item 2' }, 
        { id: 3, name: 'Item Three' }
    ]
});

Ext.widget({
    xtype: 'grid',
    renderTo: 'container',
    columns: [{
        text: 'ID',
        dataIndex: 'id'
    }, {
        text: 'Name',
        dataIndex: 'name',
        sortable: true,
        flex: 1
    }],
    store: store,
    listeners: {
        itemclick: function (grid, record) {
        	/* debugger */
            grid.getStore().remove(record);
        }
    }
});

Ext.widget({
    xtype: 'dataview',
    renderTo: 'container',
    itemSelector: '.x-dataview-item',
    itemTpl: '<div>{name:htmlEncode}</div>',
    store: store
});