Extjs How can I change the 'style' of Ext.form.Label

Question

I know that I can set the style property of the label when creating it, but I want to change the style at run time, how can I do that?

the user pick: font, color, bg color and I want to change the existing label style as user desire.

thank you?

Answer 1

You can apply styles:

yourFormPanel.getForm().findField("field_name").labelEl.setStyle({"color":"red"});

or add/remove css classes:

yourFormPanel.getForm().findField("field_name").labelEl.addCls("red-label");
yourFormPanel.getForm().findField("field_name").labelEl.removeCls("black-label");

Answer 2

You can do it in many ways

Option 1(Global): Change the SASS variable value of "Ext.form.Labelable"

eg: $form-label-font-size: 11px !default;

Option 2: Create a mixin

eg: 

file -> sass/src/form/Labelable.scss

    @include extjs-label-ui(
        $ui: 'customName',
        $ui-font-size: 11
    );

js: 
    {
        xtype: 'textfield',
        ui: 'customName'
    }

Option 3: use form field's "labelStyle" config

eg:
{
    xtype: 'textfield',
    fieldLabel: 'Test Label',
    labelStyle: 'font-weight: bold; color: #003168;',
    labelWidth: 170
}

Option 4: add "cls" to the form field and add your style to your css file eg:

js:
{
    xtype: 'form',
    defaults: {
        cls: 'test-class'
    }
}

CSS:
.test-class .x-form-item-label {
    text-transform:capitalize;
    color: #003168;
}