Use custom HTML in grid combobox - extjs

Question

I need to set up grid enline-editing combo box to show custom HTML. To be more concrete, please, look at this sample. Click any cell in Light column, open combobox. I want to place near every option ("Shade", "Mostly shady", ...) square box with unique color.

Answer 1

I was having the same problem. Finally found the answer when I was trying the solution above (which doesn't work either but is really close).
Turns out that the class for the list items is x-boundlist-item not x-combo-list-item.
If you mark your div with that class it will work. Extremely frustrating that this isn't outlined in the Sencha docs under the tpl config item for combo boxes, especially when all of the examples I can find just show a simple div for the items. I'm guessing it used to work by wrapping whatever was in the tpl config with the li and the class but it doesn't anymore. That said this is more versatile since you can make headers and lines that aren't selectable in your dropdowns by leaving off the class for those items.
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
//...
]
});
Ext.application({
name: 'SRC',
launch: function() {
Ext.create('Ext.container.Viewport', {
xtype:{
type:'vbox',
align: 'center',
pack: 'center'
}, items:[
{xtype:'combobox',
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
tpl:'<tpl for="."><div class="x-boundlist-item">{name}</div></tpl>'
}
]})
}})
Thanks

Answer 2

For making it work globally (for all comboboxes), use the following override:
Ext.override(Ext.form.field.ComboBox, {
initComponent: function() {
// the code above remains same (you can copy it from ext-all-debug.js), add the following at the end of initComponent
me.tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-boundlist-item">',
'{' + me.displayField + ':htmlEncode}',
'</div>',
'</tpl>'
);
}
});

Answer 3

What you need to do is just modify the tpl config option of the ComboBox, and use your own custom config. You can then create a new ComboBox and use that as the editor for the column definition.
Here's a sample of a custom ComboBox template:
var resultTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="x-combo-list-item">',
'<span class="number">{#}</span>',
'<h3 class="{itemColor"}>',
'{itemName}',
'</h3>',
'</div>',
'</tpl>'
);
You can then use that XTemlate when you instantiate your editor;
var combo = {
xtype: 'combo',
tpl: resultTpl
....
}