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

**Animal** · 30 Jan 2009 3:56 AM

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.

**Animal** · 4 Feb 2009 7:20 AM

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>

**evant** · 8 Feb 2009 12:54 AM

Jack changed this in one of the checkins, I'll have to check with him the reasoning behind it.

**Condor** · 8 Oct 2009 11:37 PM

*** Bump ***

Somebody else hit the same bug.

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

Thread Tools

Search Thread

Display

Hybrid View

[3.*]IE. ColumnLayout incorrectly sizing innerCt

[3.*]IE. ColumnLayout incorrectly sizing innerCt