DisabledCls for dynamically added textfields not working

Question

I'm adding fields to a fieldset as such:

renderContactFormFields: function (window) {

    var fieldSet = window.down('form').down('fieldset');

    var fieldSetItem;


    for (var i = 0; i < window.fieldsToRender.length; i++) 
    {
        var col = window.fieldsToRender[i];
        var readOnlyValue = false;


        if (contactFormReadOnlyFields.indexOf(col.dataIndex) != -1)
            readOnlyValue = true;


        if (!readOnlyValue)
            fieldSetItem = { name: col.dataIndex, fieldLabel: col.text, disabled: readOnlyValue };
        else
            fieldSetItem = { name: col.dataIndex, fieldLabel: col.text, disabled: readOnlyValue, disabledCls: 'fieldSetDisabled' };

        fieldSet.add(fieldSetItem);
    }

    window.down('form').loadRecord(window.selectedContact);
}

And the CSS in question:

.fieldSetDisabled {
    background-color: silver !important;
}

This has no effect whatsoever though. Am I doing something wrong ? The CSS above is contained within a package which seems to be correctly loaded by the framework. By inspecting the elements with Chrome's dev tools, I don't see "fieldSetDisabled" anywhere in the "class" attribute of the input.

Using 4.2.1

Thanks.

Answer 1

Form fields have also background image so the following should work:

.fieldSetDisabled .x-form-text {
    background-color: silver;
    background-image: none;
}