ExtJS 5 html in combo input box

Please try FIDDLE

The idea is to override the displayTpl template .

Note. I have used . unwrap () the jQuery function in this solution.

Ext.define('Mycombo', {
    extend: 'Ext.form.field.ComboBox',
    alias: ['widget.myCombo', 'widget.combos'],
    initComponent: function() {
        var me = this;
        me.displayTpl = new Ext.XTemplate(
            '<tpl for=".">' +
            '{[typeof values === "string" ? values : values["' + me.displayField + '"].toString().renderSup()]}' +
            '<tpl if="xindex < xcount">' + me.delimiter + '</tpl>' +
            '</tpl>'
        ); // this is the template for the display field - the display in the input field
        me.callParent();
    }
});

// this function is taken from http://stackoverflow.com/questions/17683654/superscript-in-input-field-of-text-type
String.prototype.renderSup = function() {
    var chars = '+−=()0123456789AaÆᴂɐɑɒBbcɕDdðEeƎəɛɜɜfGgɡɣhHɦIiɪɨᵻɩjJʝɟKklLʟᶅɭMmɱNnɴɲɳŋOoɔᴖᴗɵȢPpɸrRɹɻʁsʂʃTtƫUuᴜᴝʉɥɯɰʊvVʋʌwWxyzʐʑʒꝯᴥβγδθφχნʕⵡ',
        sup = '⁺⁻⁼⁽⁾⁰¹²³⁴⁵⁶⁷⁸⁹ᴬᵃᴭᵆᵄᵅᶛᴮᵇᶜᶝᴰᵈᶞᴱᵉᴲᵊᵋᶟᵌᶠᴳᵍᶢˠʰᴴʱᴵⁱᶦᶤᶧᶥʲᴶᶨᶡᴷᵏˡᴸᶫᶪᶩᴹᵐᶬᴺⁿᶰᶮᶯᵑᴼᵒᵓᵔᵕᶱᴽᴾᵖᶲʳᴿʴʵʶˢᶳᶴᵀᵗᶵᵁᵘᶸᵙᶶᶣᵚᶭᶷᵛⱽᶹᶺʷᵂˣʸᶻᶼᶽᶾꝰᵜᵝᵞᵟᶿᵠᵡᵸჼˤⵯ';
    console.log(this);
    var strP = this.replace('&nbsp;', ' '); 
    return strP.replace(/<sup[^>]*>(.*?)<\/sup>/g, function(x) {
        var str = '',
            txt = Ext.String.trim($(x).unwrap().text());
        for (var i = 0; i < txt.length; i++) {
            var n = chars.indexOf(txt[i]);
            str += (n != -1 ? sup[n] : txt[i]);
        }
        console.log(str);
        return str;
    });
};

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.window.Window', {
            width: 400,
            height: 60,
            layout: {
                type: 'vbox',
                align: 'middle',
                pack: 'middle'
            },
            items: [{
                xtype: 'myCombo',
                width: 300,
                displayField: 'value',
                valueField: 'value',
                editable: false,
                store: Ext.create('Ext.data.Store', {
                    fields: ['value'],
                    data: [{
                        value: '10<sup>-6</sup>&nbsp;psi<sup>-1</sup>'
                    }, {
                        value: '10<sup>-6</sup>&nbsp;fi<sup>-1</sup>'
                    }, {
                        value: '10<sup>-6</sup>&nbsp;ksi<sup>-1</sup>'
                    }, {
                        value: '10<sup>-6</sup>&nbsp;phie<sup>-1</sup>'
                    }]
                })
            }]
        }).show();
    }
});