Sencha Touch-如何将各种图标(每个项目一个)集成到selectfield中?

Sencha Touch-如何将各种图标(每个项目一个)集成到selectfield中?,select,icons,touch,extjs,field,Select,Icons,Touch,Extjs,Field,在Sencha Touch 2中,我使用了带有5个选项的selectfield组件。每个都有自己的图标。单击输入字段时,图标显示在文本前的选择框中。 到目前为止,我必须在运行应用程序的源代码中查找各种选项文本的ID,然后调整CSS文件,如中所示 #ext-element-150 { background: url('../images/water.jpg'); background-size: 40px 40px; padding-left: 50px; background-repeat:

在Sencha Touch 2中,我使用了带有5个选项的selectfield组件。每个都有自己的图标。单击输入字段时,图标显示在文本前的选择框中。 到目前为止,我必须在运行应用程序的源代码中查找各种选项文本的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

结果如下所示:


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

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

例如:

{description}
然后将图像名称添加到支持列表的存储中

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