How to work with combo having images inside in extjs 4.1

Question

I try to create a combo with an image (or something else) and when I choose an option, value in combo has some options.

I create a combo box look like:<

Answer 1

You won't be able to solve this with templates. The display value of a ComboBox is used as the value of the text input field, which is why your HTML is displayed literally.

It might be kind of hackish, but you can listen for the select event and update some styles directly on the inputEl.

Note that this sample is an approximation. You may have to experiment to get the desired effect.

var urlBase = 'http://icons.iconarchive.com/icons/famfamfam/silk/16/';

// Don't use image tag, just URL of icon
var states = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [
        {abbr: 'AL', name: urlBase + 'folder-picture-icon.png'},
        {abbr: 'AK', name: urlBase + 'folder-picture-icon.png'},
        {abbr: 'AZ', name: urlBase + 'folder-picture-icon.png'}
    ]
});

Ext.create('Ext.form.field.ComboBox', {
    fieldLabel:   'Choose',
    store:        states,
    queryMode:    'local',
    displayField: 'abbr',
    valueField:   'abbr',
    renderTo:     Ext.getBody(),
    tpl: [
        '',
            '
',
                '{abbr}',
            '
',
        ''
    ],
    listeners: {
        select: function (comboBox, records) {
            var record = records[0];
            comboBox.inputEl.setStyle({
                'background-image':    'url(' + record.get('name') + ')',
                'background-repeat':   'no-repeat',
                'background-position': '3px center',
                'padding-left':        '25px'
            });
        }
    }
});