extjs - Extjs 如何更改 Ext.form.Label 的“样式”

Question

我知道我可以在创建它的时候设置标签的样式属性，但是我想在运行时更改样式，我该怎么做呢？

用户选择：字体、颜色、背景颜色，我想根据用户的需要更改现有的标签样式。

谢谢你？

Answer 1

您可以应用样式：

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

或添加/删除 css 类：

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

Answer 2

您可以通过多种方式做到这一点

选项 1（全局）：更改“Ext.form.Labelable”的 SASS 变量值

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

选项 2：创建一个 mixin

eg: 

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

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

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

选项 3：使用表单字段的“labelStyle”配置

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

选项 4：将“cls”添加到表单字段并将您的样式添加到您的 css 文件，例如：

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

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