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?

Selecting an item in a list adds x-selected class to the listitem in the DOM. Can't you use this in CSS to add your icon? You probably want to set the itemCls as well, so that it only renders for a combination of itemCls and x-selected — Matt Allwood

Diana Diana · Accepted Answer · 2019-07-24T15:44:48

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);
        }
    },

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

1 Answers