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.

by Walter Rumsby

HTML

<div id="container"></div>

CSS

body {
    font-family: sans-serif;
}
.x-component {
    outline: none;
}
.x-dataview-item {
    margin: 4px;
    padding: 4px 8px;
    background-color: #ededed;
    line-height: 24px;
}
.selected {
    background-color: #333;
    color: #fff;
}
}

JavaScript

Ext.widget({
    xtype: 'dataview',
    renderTo: 'container',
    itemTpl: '<div>{name:htmlEncode}</div>',
    itemSelector: '.x-dataview-item',
    selectedItemCls: 'selected',
    selModel: {
        allowDeselect: true,
        mode: 'SIMPLE'
    },
    store: {
        fields: ['id', 'name'],
        data: [
             { id: 1, name: 'One' },
             { id: 2, name: 'Item 2' }, 
             { id: 3, name: 'Item Three' }
        ]
    },
    listeners: {
        /*itemclick: function (view, record) {
            //view.getStore().remove(record);
            var sm = view.getSelectionModel();
            
            if (sm.isSelected(record)) {
                sm.deselect(record);
            } else {
                sm.select(record);
            }
        }*/
    }
});