如何使用ext js </span>中的标记<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

也许是因为样式规则最后缺少分号？所以它应该是<span style="color:red;">

Answer 2

使用fieldCls属性，您不需要跨度。

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'
            }]
        });
    }
});