ExtJS 4: How to theme a Field without proper variable?

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 ?

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

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.

edited May 23 '17 at 12:03

Community

1
1

answered Feb 28 '12 at 06:54

Steven

441
4
16

score 1 · Answer 2 · answered Feb 27 '12 at 09:58

1

You can override the defaults by using your own CSS:

.x-item-disabled {
    color: #888888 !important;
    -moz-opacity: 100;
    opacity: 1;
    filter: alpha(opacity = 100);
    zoom: 1;
}
.x-form-item-label .x-item-disabled {
    color: #888888 !important;
    -moz-opacity: 100;
    opacity: 1;
    filter: alpha(opacity = 100);
    zoom: 1;
}

can't vouch for the overide to be of quality but classes are correct.

answered Feb 27 '12 at 09:58

dbrin

15,525
4
56
83

+1 because your post pushed me in the right direction. You forget to mention the readOnly-part so I postet a complete answer. – Steven Feb 27 '12 at 11:50

ExtJS 4: How to theme a Field without proper variable?

2 Answers2