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

dgsult0t 于 2022-09-26 发布在其他

关注(0)|答案(1)|浏览(145)

我正在使用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位于e1d1e内，定义如下：

{
    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的风格不太了解。

extjs

来源：https://stackoverflow.com/questions/28111854/field-display-styling-different-font-sizes-for-the-text-inside

1条答案

按热度按时间

fjaof16o1#

您需要在输出中添加一些格式，下面我用一个CSS类将响应 Package 在一个span元素中，该类定义了所需的样式。我在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);
                }
            }
        });
    }
});

不停摆弄

赞(0）回复(0）举报 2022-09-26

我来回答

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

1条答案

相关问题

热门标签

最新问答