Extjs 如何更改 Ext.form.Label 的'style'

Question

我知道我可以在创建标签时设置样式属性，但我想在运行时更改样式，我该如何做到这一点?

用户选择:字体，颜色，bg颜色，我想改变现有的标签样式作为用户的愿望。

谢谢?

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