CODEWITHSUNDEEP
extjssencha-architect
Braian Flores
Braian Flores

Reputation: 1

Change text color of a Ext.ComponentQuery.query

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

Upvotes: 0

Views: 516

Answers (2)

Dinkheller
Dinkheller

Reputation: 5074

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

Upvotes: 0

v1rg1l
v1rg1l

Reputation: 126

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

Upvotes: 0

Related Questions