adding custom disabledCls to field config only changes label and not form input

[simeon]

REQUIRED INFORMATION


Ext version tested:

• Ext 2.0.1 rev rc

Description:

• I am defining a custom css class for disabled fields in the field config.
  When the field.disable() is called.
  It only gets assigned to the label and not the text input

Steps to reproduce the problem:

• create a form and add "disabledCls:"foo-item-disabled" to the field config
  
  Load page.
  call the disable() method on the field
  
  Notice that the label turns black and the field does not.
  The dom for the label has foo-item-disabled. The dom for the input still has "x-item-disabled"
  

    {
        xtype: 'textfield',
        disabledCls: 'foo-item-disabled',
        name : 'name',
        label: 'Name'
    }

[mitchellsimoens]

The disabledCls should be added to the div.x-field (outer most element of the field) not the label and input. In the CSS you should then target the label and input using the disabledCls config.

[simeon]

Adding it to a fieldset that contains the fields has no effect on the fields contained.
Adding it to a specific field only effects the label and not the input.

I can iterate the fields and set the css class explicitly (which is what I am currently doing to work around this issue), but my expected behavior is that an override of the disabledCls in the field config should effect both the label and input.

{
                xtype: 'fieldset',
                disabledCls: 'af-item-disabled',
                items: [
                    {
                        xtype: 'textfield',                        
                        name : 'name',
                        disabledCls: 'af-item-disabled',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name : 'emailAddress',
                        label: 'Email'
                    },
                    {
                        xtype: 'textareafield',
                        name : 'description',
                        label: 'Description'
                    }
                ]
            }

Neither config override has the expected effect on the field.

For future consideration, the primary use case that I am trying to handle here, is the ability to make a readOnly form panel. Except I don't want to make the fields grey (hence my override of the disabledCls). I merely want the panel to be uneditable.

When doing this with Ext. I use a staticTextField field class that uses a div instead of a input dom tag. I am considering adding that for touch, since it would allow for text wrapping on long strings.

I want to be able to use the same formpanel for a readonly version and an editable version.

[simeon]

this is a css only workaround:
add this to a container that holds your fields:

 {
                xtype: 'fieldset',
                cls: 'af-item-disabled',                       
                items: [
                    {
                        xtype: 'textfield', 

                        name : 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name : 'emailAddress',
                        label: 'Email'
                    },
                    {
                        xtype: 'textareafield',
                        name : 'description',
                        label: 'Description'
                    }
                ]
            }

Then add this to your scss file to make all labels and fields black when disabled:

.af-item-disabled .x-item-disabled .x-form-label span, .af-item-disabled .x-item-disabled input, .af-item-disabled .x-item-disabled .x-input-el,.af-item-disabled .x-item-disabled .x-spinner-body,.af-item-disabled .x-item-disabled select,.af-item-disabled  .x-item-disabled textarea,.af-item-disabled .x-item-disabled .x-field-clear-container {
  color:#000;
  -webkit-text-fill-color: #000;
}