ExtJS4 - 字段显示样式，内部文本的不同字体大小

Question

美好的一天。我正在使用 ExtJS4 构建一个 Web 应用程序，并且我有一个字段显示，我在其中显示了所选用户的全名。

我正在这样获取用户名：

var firstName = record.get('FIRST_NAME');
var middleName = record.get('MIDDLE_NAME');
var lastName = record.get('LAST_NAME');

var name = firstName + " " + middleName + " " + lastName;

我的 displayfield 在 panel 中并且定义如下：

{
    xtype: 'displayfield',
    x: 175,
    y: 355,
    itemId: 'userName',
    maxWidth: 300,
    minWidth: 300,
    width: 300,
    defaultAlign: 'center',
    hideLabel: true,
    labelWidth: 60,
    fieldStyle: 'font-size: 16px; color: #ffff00; text-align: center; text-style: bold;'

}

我正在这样设置我的 displayfield：

Ext.getCmp('borrowerIconPanel').down('#borrowerFormPanel').down('#userName').setRawValue(name);

然而，这只会显示 fieldStyle 中的 name 我定义为：

font-size: 16px; color: #ffff00; text-align: center; text-style: bold;

我想要发生的是 lastName 的字体大小与 firstName 和 middleName 不同。有谁知道我怎么能做到这一点？我不太了解在 ExtJS 中更改样式。

非常感谢任何帮助，谢谢。

Answer 1

您需要在输出中添加一些格式，下面我将响应包装在一个 span 元素中，其中包含一个定义所需样式的 CSS class。我在 HTML 中使用了内联样式块作为示例，您应该将其添加到应用程序的样式表中。

<style>
.bold-text {
    font-weight: bold;
    font-size: 20px;
    color: blue;
}
</style>

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.form.Panel', {
            renderTo: Ext.getBody(),
            layout: 'vbox',
            title: 'Final Score',
            items: [{
                xtype: 'displayfield',
                id: 'userName',
                fieldLabel: "Test",
                value: 'This is a test',
                flex: 1,
                fieldStyle: 'font-size: 16px; color: #000; text-align: center; text-style: bold;'
            }, {
                xtype: 'displayfield',
                id: 'userName2',
                fieldLabel: "Test",
                flex: 1,
                value: 'This is a test'
            }],
            listeners: {
                afterrender: function() {
                    var firstName = "John";
                    var middleName = "Arthur";
                    var lastName = "Smith";

                    var name = firstName + " " + middleName + " " + lastName;

                    Ext.getCmp('userName').setRawValue(name);

                    var name = firstName + " " + middleName + " <span class='bold-text'>" + lastName +"</span>";

                    Ext.getCmp('userName2').setRawValue(name);
                }
            }
        });
    }
});

Fiddle

ExtJS4 - 字段显示样式，内部文本的不同字体大小

ExtJS4 - Field Display styling, different font sizes for the text inside

css

extjs