如何使用 ext JS 中的标记更改文本字段中值的颜色<span>

Question

如何在ext-js中的textfield值中指定标记。我的代码：

var myText = new Ext.form.TextField({
                readOnly: true,
                id: "key",
                cls:"overflowText",
                value: '<span style="color:red">'+name+'</span>',
            });

这不会将颜色应用于值。我该怎么做？

Answer 1

使用fieldCls属性，不需要span。

Fiddle

// Style
<style>
    .overflowText {
        color: red;
    }
</style>
// Code
Ext.application({
    name: 'Fiddle',
    launch: function() {
        Ext.create('Ext.Panel', {
            width: 500,
            height: 300,
            title: "FormLayout Panel",
            layout: 'form',
            renderTo: Ext.getBody(),
            bodyPadding: 5,
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                fieldCls: 'overflowText',
                allowBlank: false
            }, {
                fieldLabel: 'Last Name',
                name: 'last'
            }, {
                fieldLabel: 'Company',
                name: 'company'
            }, {
                fieldLabel: 'Email',
                name: 'email',
                vtype: 'email'
            }, {
                fieldLabel: 'DOB',
                name: 'dob',
                xtype: 'datefield'
            }, {
                fieldLabel: 'Age',
                name: 'age',
                xtype: 'numberfield',
                minValue: 0,
                maxValue: 100
            }, {
                xtype: 'timefield',
                fieldLabel: 'Time',
                name: 'time',
                minValue: '8:00am',
                maxValue: '6:00pm'
            }]
        });
    }
});

Answer 2

可能是因为样式规则末尾缺少分号？所以它应该是<span style="color:red;">