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?
Add a comment |
2 Answers
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"); Comments
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; } 