ExtJS 5 - 为ComboBox中的selectedItem自定义图标

Question

我有一个组合框，默认情况下有一些选项在ExtJS框架中突出显示。除此之外，我还想为所选项目添加一个笑脸gif图像。尝试更改“x-boundlist-item”和“x-boundlist-item-selected”类的样式，但似乎没有任何工作在make case中。

Ext.define('App.form.combobox.CutomComboBox', {
    extend         : 'Ext.form.field.ComboBox',
    alias          : 'widget.cutomcombobox', 
    displayField   : 'enumValue',
    valueField     : 'enumCode',
    listConfig     : {
        getInnerTpl: function(displayField) {
                return '<div><img src="images/smiley.gif"> {enumValue}</div>';
        }
    }
});

提前感谢您的帮助。

Answer 1

尝试使用itemTpl属性，例如：

listConfig: {
    itemTpl: '<div class="smile">{enumValue}</div>'
}

并使用一些css：

.x-boundlist-item-selected .smile:before {
  content: "";
  width: 16px;
  height: 16px;
  background-image: url('images/smiley.gif');
  .
  .
}