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

Posted 2023-02-25

【中文标题】如何更改 Ext.dataview.List 中的项目？

【英文标题】：How to change the item inside 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 的组合

【参考方案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);
        
    ,