Список 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; 
} 

Ext:

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"} 
    ] 
}); 

ComboBox Модель:

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 является сборщиком в xtype: 'combo') конфигурации вместо getInnerTpl, как это:

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

Также читайте о использовании XTemplate в целом.