组合输入字段中的 ExtJS 5 html

Question

我有一个带有 html 值的组合框。输入字段中的选定值显示为 html 标签：

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

Answer 1

请试试这个FIDDLE

想法是覆盖 displayTpl 模板。

注意：我在此解决方案中使用了 Jquery 的 .unwrap() 功能。

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

组合输入字段中的 ExtJS 5 html

ExtJS 5 html in combo inputfield

extjs

extjs5