Javascript 将HTML显示为文本的组合框

My

treecolumn

有一个组合框作为编辑器组件。选项菜单中的选项使用HTML正确呈现，但输入框不呈现HTML，它只显示标记（请参见下图）

我如何使它也呈现为HTML值

附言。 这里的解决方案似乎不适用于extjs6版本，请检查

这里是问题的位置代码（在case

depth.TypeParameter:

中呈现带有html标记的文本）

完整代码在这里

    Ext.define('Poly.view.fluidProperties.sample.Tree', {
    extend: 'Ext.tree.Panel',

    xtype: 'fluidPropertiesSampleTree',

    viewModel: {
        type: 'fluidPropertiesSampleTreeViewModel'
    },

    controller: 'fluidPropertiesSampleTreeController',

    statics: {
        /** Уровень элемента в дереве */
        depth: {
            /** Корень */
            Root: 0,
            /** Замер */
            Sample: 1,
            /** Тип среды */
            TypeFluid: 2,
            /** Параметер */
            TypeParameter: 3,
            /** Температура */
            Temperature: 4
        }
    },

    lines: false,
    rootVisible: false,
    useArrows: true,
    enableColumnHide: false,
    enableColumnResize: false,
    sortableColumns: false,

    border: true,

    viewConfig: {
        cls: 'gridActionColumnHide'
    },

    dockedItems: [
        {
            xtype: 'toolbar',
            dock: 'bottom',
            ui: 'footer',
            cls: 'transparent',
            layout: {
                type: 'hbox',
                align: 'middle',
                pack: 'center'
            },
            items: [
                {
                    xtype: 'button',
                    cls: 'pvt-chart-button',
                    text: '', // локализация в initComponent
                    flex: 2,
                    name: 'addSample',
                    margin: 2
                },
                {
                    xtype: 'button',
                    cls: 'pvt-chart-button',
                    text: '', // локализация в initComponent
                    flex: 1,
                    name: 'import',
                    disabled: true,
                    margin: 2
                },
                {
                    xtype: 'button',
                    cls: 'pvt-chart-button',
                    text: '', // локализация в initComponent
                    flex: 1,
                    name: 'export',
                    disabled: true,
                    margin: 2
                }
            ]
        }
    ],

    listeners: {
        checkchange: 'nodeCheckChange',
        edit: 'edit'
    },
    plugins: {
        ptype: 'cellediting',
        clicksToEdit: 2
    },

    bind: {
        selection: '{selectedRecord}'
    },

    initComponent: function () {
        var me = this,
            store = Ext.create('Ext.data.TreeStore', {
                root: {
                    expanded: true,
                    children: []
                }
            }),
            controller = me.getController();

        me.dockedItems[0].items[0].text = me.locale.addSample;
        me.dockedItems[0].items[1].text = me.locale.importText;
        me.dockedItems[0].items[2].text = me.locale.exportText;

        Ext.applyIf(me, {
            store: store,
            columns: [
                {
                    xtype: 'treecolumn',
                    dataIndex: 'text',
                    text: Poly.utils.locale.Base.localeName,
                    flex: 1,
                    getEditor: function (record) {
                        return me.getController().getEditor(record);
                    },
                    renderer: function (value, meta, record) {
                        var depth = Poly.view.fluidProperties.sample.Tree.depth;
                        switch (record.getDepth()) {
                            case depth.Temperature:
                                if (Ext.isEmpty(record.get('temperature'))) {
                                    return value;
                                }
                                var text = Ext.String.format('T = {0} {1}',
                                    record.get('temperature').toFixed(2),
                                    Poly.utils.UniSum.GetUnit(me.getViewModel().get('temperatureUnitId')).name);

                                return text;
                            case depth.TypeParameter:
                                if (record.get('isNew')) {
                                    return value;
                                }
                                return Poly.enums.TypeFluidParameter.getName(record.get('fluidParameter'), record.parentNode.get('typeFluid'), true);
                        }
                        return value;
                    }
                },
                {
                    width: 30,
                    xtype: 'widgetcolumn',
                    name: 'menuWidgetcolumn',
                    widget: {
                        xtype: 'button',
                        margin: '5 0 0 0',
                        arrowCls: '',
                        width: 15,
                        height: 15,
                        style: {
                            'background-color': '000000',
                            'border-color': '000000'
                        },
                        menu: {
                            xtype: 'colormenu',
                            listeners: {
                                select: function (component, color) {
                                    var button = component.up('button');

                                    button.setStyle('background-color', color);
                                }
                            }
                        }
                    },
                    onWidgetAttach: function (column, widget, record) {
                        widget.setVisible(Ext.isNumber(record.get('temperature')));
                    }
                },
                {
                    xtype: 'actioncolumn',
                    width: 25,
                    items: [
                        {
                            handler: 'removeTreeItem',
                            getClass: function (v, meta, rec) {
                                if (!rec.get('isNew')) {
                                    return 'poly-trash-icon';
                                }
                                return '';
                            },
                            getTip: function (v, meta, rec) {
                                if (!rec.get('isNew')) {
                                    return 'Delete';
                                }
                                return '';
                            }
                        }
                    ]
                }
            ]
        });

        me.getSampleNode = controller.getSampleNode;
        me.setTypeMode = Ext.bind(controller.setTypeMode, controller);

        me.callParent(arguments);
    }
});

---

我假设您的编辑器是

combo

，默认情况下，combo（以及许多其他组件）将HTML显示为纯文本

---

我想，作为解决方法，您可能会过度使用

组合（或任何其他组件），即将组件
元素更改为
。这将导致对某些方法的过度使用（
setValue（）
）
我假设您的编辑器是
combo
，默认情况下，combo（以及许多其他组件）将HTML显示为纯文本


我想，作为解决方法，您可能会过度使用
组合（或任何其他组件），即将组件
元素更改为
。这将导致对某些方法的过度使用（
setValue（）
）
Html输入元素无法显示Html，因此您需要更改模板add div。div可以显示为对输入的覆盖

实现这一点的最佳方法是扩展ComboBox：

    Ext.define('HtmlComboBox', {
    extend: 'Ext.form.field.ComboBox',
    fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
        '<input id="{id}" data-ref="inputEl" type="{type}" {inputAttrTpl}',
            ' size="1"', // allows inputs to fully respect CSS widths across all browsers
            '<tpl if="name"> name="{name}"</tpl>',
            '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
            '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
            '{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
            '<tpl if="readOnly"> readonly="readonly"</tpl>',
            '<tpl if="disabled"> disabled="disabled"</tpl>',
            '<tpl if="tabIdx != null"> tabindex="{tabIdx}"</tpl>',
            '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
            '<tpl foreach="inputElAriaAttributes"> {$}="{.}"</tpl>',
        ' class="{fieldCls} {typeCls} {typeCls}-{ui} {editableCls} {inputCls}" autocomplete="off"/>',
        // overlay element to show formatted value
        '<div id="{cmpId}-overlayEl" data-ref="overlayEl"<tpl if="name"> name="{name}-overlayEl"</tpl> class="{fieldCls}-overlay {typeCls} {typeCls}-{ui} {inputCls}">{value}</div>',
        {
            disableFormats: true
        }
    ],
    forceSelection: true,

    childEls: [
        'overlayEl'
    ],

    setRawValue: function(value) {
        var me = this;

        // set value in overlay
        if (me.rendered) {
            me.overlayEl.update(value);
        }
        return me.callParent([value]);
    }
});

Fiddle:
Html输入元素无法显示Html，因此您需要更改模板add div。div可以显示为输入的覆盖

实现这一点的最佳方法是扩展ComboBox：

    Ext.define('HtmlComboBox', {
    extend: 'Ext.form.field.ComboBox',
    fieldSubTpl: [ // note: {id} here is really {inputId}, but {cmpId} is available
        '<input id="{id}" data-ref="inputEl" type="{type}" {inputAttrTpl}',
            ' size="1"', // allows inputs to fully respect CSS widths across all browsers
            '<tpl if="name"> name="{name}"</tpl>',
            '<tpl if="value"> value="{[Ext.util.Format.htmlEncode(values.value)]}"</tpl>',
            '<tpl if="placeholder"> placeholder="{placeholder}"</tpl>',
            '{%if (values.maxLength !== undefined){%} maxlength="{maxLength}"{%}%}',
            '<tpl if="readOnly"> readonly="readonly"</tpl>',
            '<tpl if="disabled"> disabled="disabled"</tpl>',
            '<tpl if="tabIdx != null"> tabindex="{tabIdx}"</tpl>',
            '<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
            '<tpl foreach="inputElAriaAttributes"> {$}="{.}"</tpl>',
        ' class="{fieldCls} {typeCls} {typeCls}-{ui} {editableCls} {inputCls}" autocomplete="off"/>',
        // overlay element to show formatted value
        '<div id="{cmpId}-overlayEl" data-ref="overlayEl"<tpl if="name"> name="{name}-overlayEl"</tpl> class="{fieldCls}-overlay {typeCls} {typeCls}-{ui} {inputCls}">{value}</div>',
        {
            disableFormats: true
        }
    ],
    forceSelection: true,

    childEls: [
        'overlayEl'
    ],

    setRawValue: function(value) {
        var me = this;

        // set value in overlay
        if (me.rendered) {
            me.overlayEl.update(value);
        }
        return me.callParent([value]);
    }
});

小提琴：
你不能，文本字段不能呈现html。@Evantimboli嗯，也许我可以把
按钮
放进去？这行得通吗？可能是@Tyr-hmm的重复，谢谢，我的第一次尝试（只是复制粘贴的代码）没有成功，但我现在得到了一些信息，你不能，文本字段不能呈现html。@Evantimboli-hmm，也许我可以把
按钮
放在里面？这行得通吗？可能是@Tyr的复制品嗯，谢谢你，我的第一次尝试（只是复制粘贴的代码）没有成功，但我现在得到了一些信息哇，非常感谢！你是怎么在这里做的？关于如何在extjs中使用TPL，还有其他信息吗？你有可用的源代码，这是你能得到的最好的信息。嗯，thx，在这里发现了问题-模糊事件似乎有效，但没有改变任何事情你问了如何做，我向你展示了如何做，但这并不意味着你可以粘贴它，它会立即工作。我已经更改了模板，现在它应该表现得更好一些。我没有用div替换输入，而是添加了div overlay.wow，非常感谢！你是怎么在这里做的？关于如何在extjs中使用TPL，还有其他信息吗？你有可用的源代码，这是你能得到的最好的信息。嗯，thx，在这里发现了问题-模糊事件似乎有效，但没有改变任何事情你问了如何做，我向你展示了如何做，但这并不意味着你可以粘贴它，它会立即工作。我已经更改了模板，现在它应该表现得更好一些。我没有用div替换输入，而是添加了div覆盖。
.x-form-text-wrap {
    position: relative;
}

.x-form-field-overlay {
    background-color: #ffffff;
    position: absolute;
    top: 0;
}