Sencha Touch - 如何将各种图标（每个项目一个）集成到选择字段中？

Posted 2023-02-26

【中文标题】Sencha Touch - 如何将各种图标（每个项目一个）集成到选择字段中？

【英文标题】：Sencha Touch - How can I integrate various icons (one for each item) into a selectfield?

【发布时间】：2012-05-29 09:25:44

【问题描述】：

在 Sencha Touch 2 中，我使用了一个带有 5 个选项的选择域组件。每个都有自己的图标。单击输入字段时，图标会显示在文本前面的选择框中。 截至目前，我必须在正在运行的应用程序的源代码中查找各种选项文本的 ID，然后调整 CSS 文件，如

#ext-element-150  
background: url('../images/water.jpg');
background-size: 40px 40px;
padding-left: 50px;
background-repeat: no-repeat;

其中 ext-element-150 是选项元素之一的（查找的）ID。

结果如下所示：

但这是一种不灵活且容易出错的解决方法，而不是解决方案。有什么更好的方法？

【参考方案1】：

将您的 itemTpl 配置中的图像放在列表中。

例如：

<div> <img src=/path/to/imagename></> <span> description </span>

然后将图像名称添加到支持列表的商店中。