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

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'
            };
        }