Disabling a FieldContainer makes children almost invisible

[jej2003]

REQUIRED INFORMATIONExt version tested:

• Ext 4.1.0-rc1
• Ext 4.1.0-beta2

Browser versions tested against:

• IE8
• FF10 (firebug 1.3.0.10 installed)
• Safari 5

Description:

• disabling a field container also disables all of it's children, making them almost impossible to see.

Steps to reproduce the problem:

• run the example

The result that was expected:

• FieldContainer disabled, but still being able to see the children

The result that occurs instead:

• FieldContainer is disabled but children are very difficult to see

Test Case:

     Ext.onReady(function() {


   var k_panel = Ext.create('Ext.form.Panel', {
   dockedItems: [
                {
                    xtype: 'toolbar',
                    flex: 1,
                    dock: 'top',
                    items: [
                        
                        {
                            xtype: 'tbfill',
                            flex: 1
                        },{
                            xtype : 'button',
                            text : '+',
                            listeners : {
                                click : function(){
                                    window.setHeight(window.getHeight() + 1);
                                    console.log(window.getHeight());
                                }
                            }
                        },{
                            xtype : 'button',
                            text : '-',
                            listeners : {
                                click : function(){
                                    window.setHeight(window.getHeight() - 1);
                                    console.log(window.getHeight());
                                }
                            }
                        },
                        {
                            xtype: 'button',
                            disabled: false,
                            itemId: 'addTypeButton',
                            iconCls: 'silk-add',
                            label : 'blah',
                            listeners : {
                                click : function(){
                                    k_panel.down('#typeContainer').add({
                                        collapsible : true,
                                        flex : 1,
                                        title : 'test',
                                        xtype: 'fieldset',
                                        //id : 'fieldset',
                                        items : [{
                                            xtype : 'checkbox',
                            
                                        },{
                                            xtype : 'fieldcontainer',
                                            disabled : true,
                                            items : [ {
                                                xtype: 'label',
                                                text : 'hi'
                                        },
                                        {
                                            xtype: 'textfield',
                                            flex: 1,
                                            itemId: 'valueField',
                                            width : 400
                                        }]
                                    }]
                                    });
                                },
                                scope : k_panel
                            }
                        }
                    ]
                },
                {
                    xtype: 'toolbar',
                    flex: 1,
                    dock: 'bottom',
                    items: [
                        {
                            xtype: 'tbfill'
                        },
                        {
                            xtype: 'button',
                            disabled: false,
                            id: '',
                            itemId: 'submitButton',
                            iconCls: 'silk-magnifier ',
                            formBind: true
                        },
                        {
                            xtype: 'button',
                            itemId: 'clearButton',
                            iconCls: 'silk-cross'
                        }
                    ]
                }
            ],
    layout: {
        align: 'stretch',
        type: 'vbox'
    },
    items: [{
                    xtype: 'container',
                    id: 'typeContainer',
                    autoScroll: true,
                    layout: {
                        type: 'anchor'
                    },
                    items : [{
                                        collapsible : true,
                                        flex : 1,
                                        title : 'test',
                                        xtype: 'fieldset',
                                        items : [{
                                            xtype : 'checkbox',
                            
                                        },{
                                            disabled : true,
                                            xtype : 'fieldcontainer',
                                            layout : 'fit',
                                            items : [ {
                                                xtype: 'label',
                                                text : 'hi'
                                            },
                                            {
                                                xtype: 'textfield',
                                                flex: 1,
                                                itemId: 'valueField'
                                            }]
                                    }]
                            }],
                    flex: 1
                }
            ]
    });
    var window = Ext.create('Ext.window.Window', {
        layout : 'fit',
        height : 201,
        width : 432,
        items : [k_panel],
            renderTo: Ext.getBody()
    });
    window.show();
    });

HELPFUL INFORMATIONScreenshot or Video:

• attached

Debugging already done:

• none

Possible fix:

• Mask children individually

Additional CSS used:

• only default ext-all.css

Operating System:

• OSX

[mitchellsimoens]

Thanks for the report.