带有基于商店数据的图标和文本的 ExtJS ComboBox 列表

Question

我有一个 combobox，它是从商店提供的 iconCLS 和文本的信息。

而且我希望它同时显示图标和文本，如示例中所示 Image 我能够将它们添加到下拉列表中，但在选择一个值后，图标消失了。

这是我的代码：

CSS:

.customer-info-sub-chooser-gold-icon {
    background-repeat: no-repeat;
    background-image: url('images/customer-info/sub-chooser-gold-icon.png');
    content: url('images/customer-info/sub-chooser-gold-icon.png');
    width: 80px;
    display: inline-block;
    background-position: 55px 2px;
}

分机：

xtype: 'combobox',
minHeight: 30,
name: 'contactType',
padding: '5 0 0 10',
displayField: 'name',
valueField: 'id',
queryMode: 'local',
isEditable: true,
allowBlank: false,
disabled: false,
columnWidth: 1 / 4,
store: Ext.create('Components.contacts.contactComponent.store.ChooserStore'),
    listConfig: {
        //test
        getInnerTpl: function (displayField) {
            return '<img src="customer-info-sub-chooser-gold-icon" class="icon"/> {' + displayField + '}';
        }
    }

商店

Ext.define('Components.contacts.contactComponent.store.ChooserStore', {
    extend: 'Ext.data.Store',
    model: 'Processes.customerInfo.model.ComboBox',
    autoDestroy: true,
    proxy: "memory",
    data: [
        {id: 'sub-chooser-gold-icon', name: "Chooser"},
        {id: 'sub-chooser-grey-icon', name: "Sub-chooser"}
    ]
});

组合框模型：

Ext.define('Processes.customerInfo.model.ComboBox', {
    extend: 'Ext.data.Model',
  fields: [
    {name: 'id', type: 'string'},
    {name: 'name', type: 'string'}
  ]
});

谁能帮帮我？

注意：我必须通过cls"customer-info-sub-chooser-gold-icon"插入图标。

Answer 1

Working fiddle

你快到了，只需使用 tpl (Ext.view.BoundListView is picker of the xtype: 'combo') config instead of getInnerTpl，像这样：

listConfig: {
    tpl: '<tpl for="."><div class="{x-boundlist-item}"><img src="{icon}" class="icon"/>{name}</div></tpl>'
}

另请阅读 XTemplate 的一般用法。

带有基于商店数据的图标和文本的 ExtJS ComboBox 列表

ExtJS ComboBox list with icons and text based on store data

combobox

extjs

store

extjs5