ExtJS ComboBox list with icons and text based on store data

Question

I have a combobox, which is feeded from a store with information of an iconCLS and a text.

And i would like for it to show both the icon and the text, as shown in the example Image I was able to add them to the dropdown, but after selecting a value, the icon disappears.

Here is my code:

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 + '}';
        }
    }

Store

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 Model:

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

Can anyone give me some help?

Note: I have to insert the icon through the cls"customer-info-sub-chooser-gold-icon".

Answer 1

Working fiddle

You are almost there, just use tpl (Ext.view.BoundListView is picker of the xtype: 'combo') config instead of getInnerTpl, like this:

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

Also read about using of XTemplate in general.