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.
Printable View
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:
Here how it looks like:Code:.x-combo-list-item {
background: url(/WebtopLite/img/ico-library.gif) no-repeat 1px 2px;
padding-left: 20px;
}
Attachment 897
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
}
})