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