PDA

View Full Version : Display icons in Ext.form.ComboBox items



dekely
2 Sep 2012, 4:44 AM
Hi All,
Is it possible to display an icon for each item in Ext.form.ComboBox?

dekely
2 Sep 2012, 5:00 AM
Ext.XTemplate (http://docs.sencha.com/ext-js/4-0/#) will do the trick

dekely
2 Sep 2012, 5:30 AM
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
3 Sep 2012, 1:02 AM
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
3 Sep 2012, 1:32 AM
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
4 Sep 2012, 6:53 AM
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;
}