You found a bug! We've classified it as EXTJSIII-145 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Aug 2008
    Posts
    17
    Vote Rating
    0
    cyberal is on a distinguished road

      0  

    Default ext 3.4.1.1 problem with a checkboxgroup in column layout (all browsers)

    ext 3.4.1.1 problem with a checkboxgroup in column layout (all browsers)


    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.

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,541
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

    Looks like it's setting the width to zero.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2008
    Posts
    33
    Vote Rating
    2
    mrfr0g is on a distinguished road

      0  

    Default


    I had a similar issue with the column layout used in a form component. I narrowed it down to the Ext.layout.ColumnLayout.onLayout method.

    Here is the change:

    Code:
            var size = this.getLayoutTargetSize();
    
    
            if (Ext.isIE9m && (size.width < 1 && size.height < 1)) { // display none?
                return;
            }
    I believe this change is inappropriate because the size.width and size.height values can be zero when the component tree is rendered, and become not zero when the layout cycle completes.

    Restoring the previous logic fixes the issue for me, here is my change:

    Code:
            var size = this.getLayoutTargetSize();
    
    
            if (size.width < 1 && size.height < 1) { // display none?
                return;
            }

Thread Participants: 2