CODEWITHSUNDEEP
cssextjs
Razgriz
Razgriz

Reputation: 7343

Field Display styling, different font sizes for the text inside

I am building a web application using ExtJS4 and I have a Field Display where I show the full name of the user selected.

I am fetching the username as such:

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

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

My displayfield is inside a panel and is defined as such:

{
    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;'

}

and I am setting my displayfield as such:

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

However, that only displays the name in the fieldStyle that I defined to be:

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

What I want to happen is that the lastName has a different font size than firstName and middleName. Does anyone know how I can achieve this? I'm not too savvy with changing styles in ExtJS.

Upvotes: 1

Views: 1785

Answers (1)

Scriptable
Scriptable

Reputation: 19750

You would need to add some formatting in the output, Below I have wrapped the response in a span element with a CSS class that defines the required styles. I have used an inline style block in the HTML for the example, you should add this to your application's stylesheet.

<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

Upvotes: 1

Related Questions