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');
  .
  .
}

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

ExtJS 5 - Customize Icon for selectedItem in a ComboBox

extjs

extjs5