Question

I want to create a customized Ext.form.field.Field with a gray text color if the field is readOnly. If it’s not readOnly, the default text color shall be used.

There seems to be no variable in the _form.scss -file that can be used to do that.

Can I create a new variable like $form-field-readonly-color ?

Answer 1

Final solution is:

.x-form-field.x-form-text[readonly]  {
    color: gray !important;
}

Textfields have the two classes x-form-field and x-form-text. Attribute “readonly” is set by ExtJS and can be selected with brackets, see here.

This code can be pasted directly in the scss-file so it doesn’t pollute any Ext-files.