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

Remove {name} from displayTpl like below:

displayTpl:
Ext.create('Ext.XTemplate',
  '<tpl for=".">',
  '{abbr}',
  '</tpl>'
),

Answer 2

If you are going to use this approach and combobox will be marked as invalid the red ribbon will be hiden because it is set as background image like your custom icon (combo will be only in a red frame).

To fix this you can listen to select and validitychange events and set proper style there.

Example how to get style for valid/invalid combo:

getComboBoxInputStype: function(imgPath, valid) {
            return {
                'background-image': valid ? 'url(' + imgPath + ')' : 'url(' + imgPath + '), url(../../Scripts/ext/images/grid/invalid_line.gif)',
                'background-repeat': valid ? 'no-repeat' : 'no-repeat, repeat-x',
                'background-size': valid ? '18px 18px' : '18px 18px, 4px 3px',
                'background-position': valid ? '3px center' : '3px center, bottom',
                'padding-left': '25px'
            };
        }

Answer 3

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: [
        '<tpl for=".">',
            '<div class="x-boundlist-item">',
                '<img src="{name}"/>{abbr}',
            '</div>',
        '</tpl>'
    ],
    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'
            });
        }
    }
});