Display icons in Ext.form.ComboBox items

[dekely]

Hi All,
Is it possible to display an icon for each item in Ext.form.ComboBox?

[dekely]

Ext.XTemplate (http://docs.sencha.com/ext-js/4-0/#) will do the trick

[dekely]

Problem:
When my displayField contains html code, you see html in the combobox input text.

'<img src="'+item.buttonImageName+'"/>&nbsp;'+item.buttonLabel

any idea?

[vdaiev]

You need to specify a fieldSubTemplate.Check out this topic: http://stackoverflow.com/questions/9016859/extjs-4-render-html-of-a-selected-value-in-a-combobox

[dawesi]

you wouldn't need a subtemplate to put an icon next to the text, just use



tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div><img src="'+{buttonImageName}"/>&nbsp;'+{buttonLabel}</div>',
'<div>{buttonLabel}</div>',
'</tpl>'
)


see this post for full example: http://www.sencha.com/forum/showthread.php?136623-ComboBox-with-Images-in-ExtJS-4&p=613503&viewfull=1#post613503

[dekely]

One small issue:
I want to select a value by code but it doesn't work.

setRawValue: function(value) {
var me = this;
value = Ext.value(value, '');
me.rawValue = value;

// Some Field subclasses may not render an inputEl
if (me.inputEl) {//Undefined when I try to call 'select' method on the combobox
me.inputEl.dom.innerHTML = value;
}
return value;
}