如何更改 Ext.dataview.List 中的项目？答案

【问题标题】：How to change the item inside Ext.dataview.List?如何更改 Ext.dataview.List 中的项目？
【发布时间】：2019-07-13 13:23:02
【问题描述】：

我有一个这样的列表：

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

现在我希望如果我通过单击来选择一个项目（由 itemTpl 中的 Ext.dataview.List 呈现的 div），一个选定的图标会显示在所选项目的开头。但是，我似乎找不到访问该项目的方法。有什么想法吗？

【问题讨论】：

在列表中选择一个项目会将x-selected 类添加到 DOM 中的 listitem 中。你不能在 CSS 中使用它来添加你的图标吗？您可能还想设置 itemCls，以便它只呈现 itemCls 和 x-selected 的组合

标签： extjs sencha-touch sencha-touch-2

【解决方案1】：

您可以将字段添加到您的商店模型中，例如 selected，并基于此，您可以在您的 tpl 中显示图标。

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

我会将侦听器更改为选择，以便您可以在用户选择记录时更新记录。

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

【讨论】：