Question

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

我正在提取用户名：

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);

但是，这只显示我定义为的name中的fieldStyle：

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

我想要发生的是lastName的字体大小与firstName和middleName不同。有谁知道我怎么能做到这一点？我不太擅长改变ExtJS的风格。

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

Answer 1

您需要在输出中添加一些格式，下面我已将响应包装在span元素中，其中CSS类定义了所需的样式。我在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 - 字段显示样式，内部文本的字体大小不同

1 个答案: