How do I add an image to a combo in Extjs?

Question

I managed to add a images in the extjs combo selection list however after selecting an item did not manage to have the same images displayed int he collapsed combo. I tried changing the template (displayTpl) by adding some custom HTML however it will get escaped. any help would be appreciated.

Thanks

   this.chartCombo = Ext.create('Ext.form.field.ComboBox', {
        height: '20',
        fieldLabel: 'Chart Type',
        displayField: 'chartLabel',
        valueField: 'chartValue',
        store: chartComboDataSource,
        queryMode: 'local',
        listConfig: {
            getInnerTpl: function() {
                this.cls = 'option-list-chart-img';
                return "<img class='{cssClassName}'/> {chartLabel}";
            }
        }
    });

Answer 1

It doesn't work because the collapsed combo is just a simple <input> element that can't contain HTML. I suggest you set the image as a background image to the <input> , switching it programmatically when selection changes.