[Workaround] Image in Combobox options?

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.

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)

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

Code:

---

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

---

Here how it looks like:

Attachment 897

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

Quote:

---

Originally Posted by cluettr

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.

Code:

---

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

---

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

PHP Code:

---

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' 


---

Hello All,
I came up with a situation where I have to handle the click events of the image added to the list items through tpl.

Can anyone guide me in this direction


Thanks

You mean a click does something on the image only, but not on the rest of the combo item?
Hm, this would be my approach:

PHP Code:

---

comboBox.getEl().on('click', function(event, target) {
  if(target == 'img') {
     //do something
  }
}) 


---