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

Question

在 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。

结果如下所示：

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

Answer 1

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

例如：

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

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