ExtJS 4.2 TextField如何通过loadRecord实现双色文本显示？

当然可以实现这个需求！不过要注意：ExtJS 4.2的原生TextField基于<input>元素，而<input>本身只能显示纯文本，没法直接渲染HTML。所以我们需要自定义组件或者改造原生TextField，以下分两种常见场景给出具体实现方案：

这是你描述的场景中最常用的情况——表单加载数据后仅展示内容，不需要编辑。我们可以自定义一个继承自Ext.form.field.Text的组件，用一个可渲染HTML的<div>替代原生的<input>来显示内容。

自定义组件代码 #

Ext.define('HtmlTextField', {
    extend: 'Ext.form.field.Text',
    alias: 'widget.htmltextfield',
    
    // 默认设为只读，因为要展示HTML内容
    readOnly: true,

    initComponent: function() {
        this.callParent(arguments);
        // 监听值变化，同步更新HTML显示
        this.on('change', this.updateHtmlDisplay, this);
    },

    onRender: function(ct, position) {
        this.callParent(ct, position);
        // 创建用于渲染HTML的div，样式对齐原生TextField
        this.htmlDisplay = Ext.DomHelper.append(this.getEl(), {
            tag: 'div',
            cls: 'html-textfield-display',
            style: 'position:absolute; top:0; left:0; right:0; bottom:0; padding: 2px 5px; line-height:20px; border:none; background:transparent; white-space:nowrap; overflow:hidden;'
        }, true);
        // 隐藏原生input元素
        this.inputEl.hide();
        // 初始化显示内容
        this.updateHtmlDisplay();
    },

    setValue: function(value) {
        // 先调用父类方法存储值，保证表单数据一致性
        this.callParent([value]);
        this.updateHtmlDisplay();
        return this;
    },

    updateHtmlDisplay: function() {
        if (this.htmlDisplay) {
            this.htmlDisplay.setHtml(this.getValue());
        }
    },

    // 确保表单提交时返回原始带HTML的值
    getSubmitValue: function() {
        return this.getValue();
    }
});

使用示例 #

Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    width: 300,
    items: [{
        xtype: 'htmltextfield',
        fieldLabel: '随机值',
        name: 'property1',
        labelWidth: 60
    }],
    buttons: [{
        text: '加载数据',
        handler: function() {
            // 模拟从服务器获取的记录
            var record = Ext.create('Ext.data.Model', {
                property1: 'Random (<span style="color:red;">1234</span>)'
            });
            this.up('form').loadRecord(record);
        }
    }]
});

如果你的TextField需要允许用户编辑内容，编辑时显示纯文本，展示时切换为双色HTML效果，可以扩展上面的组件，实现编辑/展示模式的切换：

可编辑版自定义组件代码 #

Ext.define('EditableHtmlTextField', {
    extend: 'HtmlTextField',
    alias: 'widget.editablehtmltextfield',
    
    // 默认允许编辑
    readOnly: false,

    initComponent: function() {
        this.callParent(arguments);
        // 监听只读状态变化，切换显示模式
        this.on('readonlychange', this.toggleDisplayMode, this);
    },

    toggleDisplayMode: function(field, readOnly) {
        if (readOnly) {
            this.inputEl.hide();
            this.htmlDisplay.show();
            this.updateHtmlDisplay();
        } else {
            this.htmlDisplay.hide();
            this.inputEl.show();
            // 把HTML内容转成纯文本显示在input中
            var plainText = Ext.util.Format.stripTags(this.getValue()).replace('Random (', '').replace(')', '');
            this.inputEl.setValue(plainText);
        }
    },

    setValue: function(value) {
        this.callParent([value]);
        if (!this.readOnly && this.inputEl?.isVisible()) {
            var plainText = Ext.util.Format.stripTags(value).replace('Random (', '').replace(')', '');
            this.inputEl.setValue(plainText);
        }
        return this;
    },

    getValue: function() {
        if (!this.readOnly && this.inputEl?.isVisible()) {
            // 编辑完成后，把输入的纯文本重新包装成带HTML的格式
            var inputValue = this.inputEl.getValue();
            return `Random (<span style="color:red;">${inputValue}</span>)`;
        }
        return this.callParent(arguments);
    }
});

1. 样式适配：自定义的<div>要和原生TextField的默认样式（内边距、行高、字体）对齐，避免视觉上的不协调；
2. 表单提交：根据业务需求调整getSubmitValue()或getValue()的返回值，确保提交的数据格式符合服务器要求；
3. 版本兼容性：以上代码基于ExtJS 4.2的API编写，在该版本下可以稳定运行。

内容的提问来源于stack exchange，提问作者SensacionRC