How to change the item inside Ext.dataview.List?

Question

I have a List like this:

Ext.define('ddp.components.listview.ListView', {
    extend: 'Ext.dataview.List',
    listeners: {
        childtap: function(view, location, eOpts) {
            // TODO
        }
    },
    itemTpl: new Ext.Xtemplate(`
        <div>{item}</div>
    `),
});

Now I want that if I select an item by clicking it (the div that is rendered by Ext.dataview.List in itemTpl), a selected icon show up at the beginning of the selected item. However I cannot seem to find a way to access the item to do so. Any idea?

Answer 1

You can add a field to your store's model like selected, and based on that, you can show the icon in your tpl.

<tpl if="selected">',
    '<div>{icon}</div>',
    '<div>{item}</div>',
'</tpl>',
'<tpl else>',
    '<div>{item}</div>',
'</tpl>',

I would change the listener to select so you can update the record when the user selects it.

    listeners: {
        select: function(list, selected, eOpts) {
            selected.set('selected',true);
        }
    },