组合输入字段中的ExtJS 5 html

我有一个带有html值的组合框。 inputfield中的选定值显示为html标记：

如何在没有html标记的情况下显示值？ 谢谢。

请试试这个

其思想是覆盖模板

注意：我在这个解决方案中使用了Jquery函数

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();
    }
});

Ext.define（'Mycombo'{
扩展：“Ext.form.field.ComboBox”，
别名：['widget.myCombo'，'widget.combos']，
initComponent:function（）{
var me=这个；
me.displayTpl=新的Ext.XTemplate(
'' +
“{[typeof values===”string”？值：值[“+me.displayField+”].toString（）.renderSup（）]”+
“+me.delimiter+”+
''
)；//这是显示字段的模板-输入字段中的显示
me.callParent（）；
}
});
//此函数取自http://stackoverflow.com/questions/17683654/superscript-in-input-field-of-text-type
String.prototype.renderSup=函数（）{
var chars+−=（）0123456789AaÆᴂ英国广播公司二期节目ᵻɩjJʝKklLʟᶅɭMmɱNnɴɲɳŋOoɔᴖᴗɵPpɸrRɹsʂTtƫUuᴜᴝʉɥɰvVʋwWxyzʐꝯᴥβγδθφχнნʕⵡ',
支持⁺⁻⁼⁽⁾⁰¹²³⁴⁵⁶⁷⁸⁹ᴬᵃᴭᵆᵄᵅᶛᴮᵇᶜᶝᴰᵈᶞᴱᵉᴲᵊᵋᶟᵌᶠᴳᵍᶢˠʰᴴʱᴵⁱᶦᶤᶧᶥʲᴶᶨᶡᴷᵏˡᴸᶫᶪᶩᴹᵐᶬᴺⁿᶰᶮᶯᵑᴼᵒᵓᵔᵕᶱᴽᴾᵖᶲʳᴿʴʵʶˢᶳᶴᵀᵗᶵᵁᵘᶸᵙᶶᶣᵚᶭᶷᵛⱽᶹᶺʷᵂˣʸᶻᶼᶽᶾꝰᵜᵝᵞᵟᶿᵠᵡᵸჼˤⵯ';
console.log（this）；
var strP=此。替换（“”，”）；
返回strP.replace（/]*>（.*）/g，函数（x）{
var str=''，
txt=Ext.String.trim（$（x）.unwrap（）.text（））；
对于（变量i=0；i

另请参见：谢谢，但inputfield中的值仍然不漂亮。我将创建一个组件，它将扩展带有菜单的基本按钮，类似于@ki11en——这是一个如何使用默认组合框的解决方案。您可以更改呈现上标的函数以使其美观。但我也喜欢你对巴顿的态度。