Hi,

To support IE10 I upgrade ext js from the version 3.4.0 to 3.4.1.1.
The content of my checkboxgroup doesn't appear because it has a width of 0.
The problem comes from the changes in the columnLayout class of the version 3.4.1.1.
If I use ext js 3.4.1.1 with the version 3.4.0 of the columnLayout class I have no problem with my test case.

To test, click on the button change and you shouldn't see the checkbox in the checkboxgroup with the name 'Type'.

What is the problem that the modifications of the ColumnLayout class fixe?

Code:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"> </script>
    <script type="text/javascript" src="../../ext-all-debug.js"> </script>

    <script type="text/javascript">
    
Ext.onReady(function(){

    Ext.QuickTips.init();
    
    // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
        
    var integrationHisto = new Ext.form.Checkbox({
        boxLabel : 'Integration',
        name     : 'integrationHisto',
        checked  : true
    });
    
    var reportingHisto = new Ext.form.Checkbox({
        boxLabel : 'Reporting',
        name     : 'reportingHisto',
        checked  : true
    });
    
    
    var fp3 = new Ext.FormPanel({
        region: 'north',
        
        frame: true,
        width: 500,
        height: 500,
        // autoHeight: true,
        
        items: [{
                    border: false,
                    layout:'table',
                    defaults: {
                        border: false
                    },
                    layoutConfig: {
                        columns: 2
                    },
                    
                    items: [{
                        layout: 'form',
                        width: 400,
                        items: [{
                            xtype: 'checkboxgroup',
                            fieldLabel: 'Type',
                            items: [
                                integrationHisto,
                                reportingHisto
                            ]
                        }]
                    }, {
                        xtype: 'panel',
                        layout: 'form',
                        items: [{
                            xtype: 'button',
                            text: 'Apply'
                        }]
                    }]
            }]
    });
    
    var panel = new Ext.Panel({
        
        layout: 'border',
        
        width: 800,
        height: 800,
        
        items: [
            fp3, {
            
            xtype: 'panel',
            region: 'center',
            
            items: [{
                xtype: 'label',
                text: 'hello'
            }]
        }]
        
    });
    
    var activeItem = 0;
    
    var cardPanel = new Ext.Panel({
        id: 'my-card',
        height: 800,
        width: 800,
        renderTo: Ext.getBody(),
        layout: 'card',
        activeItem: activeItem,
        
        layoutConfig: {
          deferredRender: false
        },
        
        items: [{
            title: 'Tab 1',
            html: 'A simple tab'
        }, panel],
        
        buttons: [{
            text: "Change",
            handler: function() {
                var cardP = Ext.getCmp('my-card');
                activeItem = (activeItem + 1) % 2;
                
                cardP.getLayout().setActiveItem(activeItem);
            }
        }]
    });
    
});
</script>

</head>
<body>
    
</body>
</html>
Thank you for your help.