[Workaround] Image in Combobox options?

[cluettr]

Is it possible to place an image/icon next to each option within the combobox? I looked through the threads and I didn't find any.

[Skeleton]

I have done a similar thing at work for a project. I couldn't see any built-in funcionality for this in the Ext library but it is a pretty simple thing and can be done wrting a few CSS rules. I will try to put the code I have used here if I don't forget tomorrow while I was at office (bump this thread or better PM me tomorrow)

[Skeleton]

This is the rule that I have used for icons in combo:

.x-combo-list-item {
    background: url(/WebtopLite/img/ico-library.gif) no-repeat 1px 2px;
    padding-left: 20px;
}

Here how it looks like:

combo-icon.png

[cluettr]

Thank you Skeleton. I think this would only allow you to apply one image for all options, correct?

[liggett78]

Thank you Skeleton. I think this would only allow you to apply one image for all options, correct?

That's true as long as you use this CSS class for all items. Another option is to use (maybe not yet documented) tpl config option. Combobox is a templated control, so you can customize the appearance of items in the list as you like it.

    Ext.form.ComboBox({
     ...
     tpl : '<div><img ... /></div>',
     ...
    });

[quixit]

I got here by google on searching the same issue for Extjs 4.
The solution for ExtJs4 is the listConfig entry:

xtype: 'combobox',
anchor: '100%',
listConfig: {
  getInnerTpl: function(displayField) {
    return '<img src="/images/icons/{id}.png" class="icon"/> {' + displayField + '}';
  }
},
name: 'type',
fieldLabel: 'Group Type',
displayField: 'label',
hiddenName: 'type',
queryMode: 'local',
store: 'group.Types',
valueField: 'id'