Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default [3.*]IE. ColumnLayout incorrectly sizing innerCt

    [3.*]IE. ColumnLayout incorrectly sizing innerCt


    Drop this file unchanged into examples/layout in the 3.0 trunk with the latest build:

    Code:
    <html>
    <head>
      <title>Column Layout</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
        <!-- GC -->
         <!-- LIBS -->
         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
         <!-- ENDLIBS -->
    
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
        <style type="text/css">
        html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }
        .x-panel-body p {
            margin:5px;
        }
        .x-column-layout-ct .x-panel {
            margin-bottom:5px;
        }
        .x-column-layout-ct .x-panel-dd-spacer {
            margin-bottom:5px;
        }
        .settings {
            background-image:url(../shared/icons/fam/folder_wrench.png) !important;
        }
        .nav {
            background-image:url(../shared/icons/fam/folder_go.png) !important;
        }
        </style>
        <script type="text/javascript">
    
        Ext.onReady(function(){
    
           // NOTE: This is an example showing simple state management. During development,
           // it is generally best to disable state management as dynamically-generated ids
           // can change across page loads, leading to unpredictable results.  The developer
           // should ensure that stable state ids are set for stateful components in real apps.
           Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
           var viewport = new Ext.Viewport({
                layout:'border',
                items:[{
                    region:'west',
                    id:'west-panel',
                    title:'West',
                    split:true,
                    width: 200,
                    minSize: 175,
                    maxSize: 400,
                    collapsible: true,
                    margins:'35 0 5 5',
                    cmargins:'35 5 5 5',
                    layout:'accordion',
                    layoutConfig:{
                        animate:true
                    },
                    items: [{
                        html: Ext.example.shortBogusMarkup,
                        title:'Navigation',
                        autoScroll:true,
                        border:false,
                        iconCls:'nav'
                    },{
                        title:'Settings',
                        html: Ext.example.shortBogusMarkup,
                        border:false,
                        autoScroll:true,
                        iconCls:'settings'
                    }]
                },{
                    region:'center',
                    margins:'35 5 5 0',
                    xtype: 'tabpanel',
                    activeTab: 0,
                    items:{
                        xtype: 'container',
                        autoEl: {},
                        title: 'Tab with embedded column layout',
                        style: "overflow:auto",
                        items: {
                            xtype: 'container',
                            autoEl: {
                                id: 'column-container'
                            },
                            layout:'column',
                            items:[{
                                width: 200,
                                baseCls:'x-plain',
                                bodyStyle:'padding:5px 0 5px 5px',
                                items:[{
                                    title: 'A Panel',
                                    html: Ext.example.shortBogusMarkup
                                }]
                            },{
                                width: 200,
                                baseCls:'x-plain',
                                bodyStyle:'padding:5px 0 5px 5px',
                                items:[{
                                    title: 'A Panel',
                                    html: Ext.example.shortBogusMarkup
                                }]
                            }]
                        }
                    }
                }]
            });
        });
        </script>
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
      </body>
    </html>
    It works on FF and Chrome, but gets a horizontal scrollbar in IE.

    The problem is when the ColumnLayout comes to size that innerCt wrapping DIV:

    Code:
        onLayout : function(ct, target){
            var cs = ct.items.items, len = cs.length, c, i;
    
            if(!this.innerCt){
                target.addClass('x-column-layout-ct');
    
                // the innerCt prevents wrapping and shuffling while
                // the container is resizing
                this.innerCt = target.createChild({cls:'x-column-inner'});
                this.innerCt.createChild({cls:'x-clear'});
            }
            this.renderAll(ct, this.innerCt);
    
            var size = Ext.isIE && target.dom != Ext.getBody().dom ? target.getStyleSize() : target.getViewSize();
    
            if(size.width < 1 && size.height < 1){ // display none?
                return;
            }
    
            var w = size.width - target.getPadding('lr') - this.scrollOffset,
                h = size.height - target.getPadding('tb'),
                pw = w;
    
            this.innerCt.setWidth(w);
            
            // some columns can be percentages while others are fixed
            // so we need to make 2 passes
    
            for(i = 0; i < len; i++){
                c = cs[i];
                if(!c.columnWidth){
                    pw -= (c.getSize().width + c.getEl().getMargins('lr'));
                }
            }
    
            pw = pw < 0 ? 0 : pw;
    
            for(i = 0; i < len; i++){
                c = cs[i];
                if(c.columnWidth){
                    c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr'));
                }
            }
        }
    If the Container being layed out is not explicitly sized, then IE returns an incorrect offsetWidth.

    This should work. DIVs should assume their parent node width.

    After running that, at the IE8 Developer tools console type

    Code:
    Ext.getDom("column-container").offsetWidth;
    Ext.getDom("column-container").parentNode.offsetWidth;
    See how it just gets it wrong?

    It shows identical values on the FB and Chrome consoles.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    I found it. The change between the 2.0 CardLayout.setActiveItem and the 3.0 CardLayout.setActiveItem.

    In the code below there's a commented out override which re-introduces the 2.0 code. It fixes the problem.

    Drop this into examples/layout. Run it on IE.

    Code:
    <html>
    <head>
      <title>Column Layout</title>
        <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    
        <!-- GC -->
         <!-- LIBS -->
         <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
         <!-- ENDLIBS -->
    
        <script type="text/javascript" src="../../ext-all.js"></script>
    
        <!--<script language="javascript" src="../grid/PropsGrid.js"></script>-->
        <style type="text/css">
        html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }
        .x-panel-body p {
            margin:5px;
        }
        .x-column-layout-ct .x-panel {
            margin-bottom:5px;
        }
        .x-column-layout-ct .x-panel-dd-spacer {
            margin-bottom:5px;
        }
        .settings {
            background-image:url(../shared/icons/fam/folder_wrench.png) !important;
        }
        .nav {
            background-image:url(../shared/icons/fam/folder_go.png) !important;
        }
        </style>
    <script type="text/javascript">
    
    /* reenable this code to fix.
    Ext.override(Ext.layout.CardLayout, {
    
        setActiveItem : function(item){
            item = this.container.getComponent(item);
            if(this.activeItem != item){
                if(this.activeItem){
                    this.activeItem.hide();
                }
                this.activeItem = item;
                item.show();
                this.layout();
            }
        }
    });
    */
    
        Ext.onReady(function(){
    
           // NOTE: This is an example showing simple state management. During development,
           // it is generally best to disable state management as dynamically-generated ids
           // can change across page loads, leading to unpredictable results.  The developer
           // should ensure that stable state ids are set for stateful components in real apps.
           Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    
           var viewport = new Ext.Viewport({
                layout:'border',
                items:[{
                	region: 'west',
                	width: 200
                }, {
                    region:'center',
                    xtype: 'panel',
                    layout:'card',
                    activeItem: 0,
                    items: {
                        xtype: 'container',
                        autoEl: {
                        },
                        title: 'ContainerLayout Card with embedded column layout',
                        style: "overflow: auto",
                        items: {
                            xtype: 'container',
                            autoEl: {
                                id: 'column-container'
                            },
                            layout:'column',
                            items:[{
                                width: 200,
                                baseCls:'x-plain',
                                bodyStyle:'padding:5px 0 5px 5px',
                                items:[{
                                    title: 'A Panel',
                                    html: Ext.example.shortBogusMarkup
                                }]
                            },{
                                width: 200,
                                baseCls:'x-plain',
                                bodyStyle:'padding:5px 0 5px 5px',
                                items:[{
                                    title: 'A Panel',
                                    html: Ext.example.shortBogusMarkup
                                }]
                            }]
                        }
                    }
                }]
            });
        });
        </script>
    </head>
    <body>
    <script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
      </body>
    </html>

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,164
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Jack changed this in one of the checkins, I'll have to check with him the reasoning behind it.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    *** Bump ***

    Somebody else hit the same bug.

Thread Participants: 2