Change text color of a Ext.ComponentQuery.query

Question

I'm working with Sencha Architect.

I'm passing values ​​from a localStorage to a displayfield.

get_name: function(component, eOpts) {
        let data = JSON.parse(localStorage.getItem("loginData"));
        name = data["name"];
        Ext.ComponentQuery.query('displayfield[name="show_name"]')[0].setValue(name);

    }

The value appears normally, but I can't change the font color.

Any idea how I can do this?

I've tried a few things like:

html, style, css.

But the text color remains default

Answer 1

You can change the text color of your displayfield's value by using the config fieldStyle or setting it programmatically with the method setFieldStyle .

So here are your alternatives:

{
    xtype: 'displayfield',
    fieldLabel: 'My Display Field',
    name: 'myField',
    value: '10',
    fieldStyle: { color: "red" }
} 

OR

<displayfield>.setFieldStyle({ color: "red" });

Answer 2

You cannot use background-color, it has to be backgroundColor.

    get_name: function(component, eOpts) {
        const field = Ext.ComponentQuery.query('displayfield[name="show_name"]')[0];
        let data = JSON.parse(localStorage.getItem("loginData")),
            name = data["name"];

        field.setValue(name);
        field.setStyle('backgroundColor','white');
    }

And I would not go with Ext.ComponentQuery. Instead you might go with

    const form = getFormPanel, // typically this.getView()
         field = form.lookupName('show_name');