how to apply images to selected items combobox in extjs 4.0 - extjs

Question

I want to add images in front of the text in an ExtJS combobox. I have the following code in listConfig...
listConfig: {
getInnerTpl: function(displayField) {
var tpl = '<div>' +'my img path is here' + '{name}</div>';
return tpl;
}
},
And my store is like this
Ext.define('state', {
extend: 'Ext.data.Model',
fields: [{ name: 'stateCode', type: 'int' }, { name: 'name', type: "string"}]
});
My JSON response from the server...
[{"stateCode":"0","name":"--Select--"},{"stateCode":"1","name":"ABC"},{"stateCode":"2","name":"XYZ"},{"stateCode":"3","name":"OPQ"},{"stateCode":"188587","name":"LMN"}]
Here i get the image infront of all items in combobox, but I only want the image infront of items with stateCode 1.
Please help

Answer 1

listConfig: {
getInnerTpl: function(displayField) {
var tpl = new XTemplate(
'<div>',
'<tpl if="stateCode > 0">',
'<img src='img/path/image.jpg' />',
'</tpl>',
'</div>'
);
return tpl;
}
}

Answer 2

I know this is old, but since I've encountered similar problem just recently, I'm gonna post my solution, maybe it will be some help to others.
In this case, you can do something like this:
listConfig: {
getInnerTpl: function(displayField) {
var tpl = '<div>' +'{[values.stateCode == 0 ? "<img src=\'path/to/image.jpg\'" : ""]}' + '{name}</div>';
return tpl;
}
},

Answer 3

var tpl = '<div><img src='img/path/image.jpg' class="state-{state}" />{name}</div>';
then uses css clasess to do something with your image (like hide or show)

Answer 4

I'm using ExtJS 5 and this is working for me:
listConfig: {
itemTpl: [
'<tpl if="stateCode = 0"', // If you have to use '<' or '>' you have to encode it (>)
'<img src="path/to/img.png" /> {name}',
'<tpl else>',
'{name}',
'</tpl>'
]
}

Answer 5

None of the answers so far were working for me, except #riza, but that doesn't provide enough logic for what I needed to do with multiple else if statements. It turns out that others were using "," instead of "+" (except #riza) to concatenate the strings of the tpl. Also, #MMZurita makes a good point with the encoding special characters in HTML. So > becomes > and < becomes <. The <div> and </div> need to go at the beginning and end of the actual tpl tag!
listConfig: {
getInnerTpl: function() {
var tpl =
'<div>' +
'<tpl if="id == 1">' +
'<img src="resources/icons/one.png" align="left"> {name}' +
'<tpl elseif="id == 2">' +
'<img src="resources/icons/two.png" align="left"> {name}' +
'<tpl elseif="id > 2">' +
'<img src="resources/icons/Custom.png" align="left"> {name}' +
'<tpl else>' +
'<img src="resources/icons/Standard.png" align="left"> {name}' +
'</tpl>' +
'</div>';
//);
return tpl;
}
}