[2.2] Viewport with nested border layouts - bug in FF3

[y0y]

I have stumbled on a specific behavior in FF3 (it does not occur in IE6, I am not sure about FF2) wherein if I have a Viewport with a border layout containing a north region and a center region, whose center region also contains a border layout with a tab panel center region and a regular panel east region.. if I make the east region collapsible, when it is collapsed the entire layout goes FUBAR.

To reproduce, try to create the following viewport in an html page which has Ext loaded (using the Ext adapter) with the default ext-all.css. Nothing more.


NOTE: This affects Ext 2.2. I am not sure about other versions.

Ext.onReady(function(){
    var layout = new Ext.Viewport({
        layout: 'border',
        items: [
            new Ext.Panel({
                region: 'north',
                height: 50,
                id: 'header',
                html: ''
            }),
            new Ext.Panel({
                region: 'center',
                layout: 'border',
                items: [
                    new Ext.TabPanel({
                        region: 'center',
                        activeTab: 0,
                        items: [
                            {
                                title: 'Tab 1',
                                html: 'Tab 1 body'
                            },{
                                title: 'Tab 2',
                                html: 'Tab 2 body'
                            }
                        ]
                    }),
                    new Ext.Panel({
                        region: 'east',
                        width: 100,
                        collapsible: true,
                        collapsed: true,
                        title: 'Test'
                    })
                ]
            })
        ]
    });

Is this something that I am doing wrong? From what I can tell, this appears to be a rendering bug.

[y0y]

Some additional information about this bug:

It happens for both east and west oriented panels.

It happens only when "callapsed: true" is set in the configuration - if it isn't collapsed at render-time it will work as expected.

A kludgey work-around is to create a listener event for the viewport and, on the afterLayout event, collapse the panel manually via its collapse() method with a delayed task of ~100ms. This delay is enough to allow the viewport to render properly before the collapse takes place, avoiding the layout issue.

This is still a bug in my eyes, though. Even with a work around.

[Condor]

I just tested your code in FF 3.0.1, but I can't see anything wrong with it.

[y0y]

I just tested your code in FF 3.0.1, but I can't see anything wrong with it.

I'm using FF 3.0.1, as well. Everyone that has tried this in the office has the same issue, so it's definitely not just isolated to my machine. It doesn't have to be a tab panel, either. The following has the same result:

Ext.onReady(function(){
    var layout = new Ext.Viewport({
        layout: 'border',
        items: [
            new Ext.Panel({
                region: 'north',
                height: 50,
                html: ''
            }),
            new Ext.Panel({
                region: 'center',
                layout: 'border',
                items: [
                    new Ext.Panel({
                        region: 'center',
                        html: 'Test'
                    }),
                    new Ext.Panel({
                        region: 'east',
                        width: 100,
                        collapsible: true,
                        collapsed: true,
                        title: 'Test'
                    })
                ]
            })
        ]
    });
})

Here is a screen shot:

[y0y]

I can also reproduce this bug with the following Ext sample:

http://www.extjs.com/deploy/dev/exam...ow/layout.html

Simply add

collapsible: true,
collapsed: true

to the nav panel as so:

// Panel for the west
        var nav = new Ext.Panel({
            title       : 'Navigation',
            region      : 'west',
            split       : true,
            width       : 200,
            collapsible : true,
            margins     : '3 0 3 3',
            cmargins    : '3 3 3 3',
            collapsible : true,
            collapsed   : true
        });

[y0y]

It also appears that the following thread is regarding the same issue:

http://www.extjs.com/forum/showthread.php?t=45717

[Condor]

I tested the modified layout example and the link in the thread you posted, but both show the correct layout.

Are you using something different than Ext 2.2, FF 3.0.1 and Windows XP SP3 ?

[y0y]

The thread I posted describes the same issue, but the person who posted the thread fixed their code. They "fixed" it by not having the panel collapsed at render time. Sorry for any confusion there.

It certainly is odd that you're not seeing this. This is my setup:

1. Windows XP SP2
2. FF 3.0.1 with the following extensions enabled:
- Firebug 1.3x.a01 (however my coworker experiences this with the latest stable release)
- ColorfulTabs 3.4
- YSlow 0.9.5b2
3. Ext 2.2 - latest release on the home page
- ext adapter
- ext-all.css

I can't think of anything else that might be relevant. It should be noted that this problem is being seen with a variety of extensions, and also appears when I disable all of them.

When I get home I will see if I have the same issue there. Maybe something about the setup in our office is different.

[nateirwin]

I'm seeing a similar issue. Did you find a workaround (other than rendering and then collapsing)?

[nateirwin]

Okay, figured it out. I had an override in that was causing this issue.

So, to summarize, I was able to nest border layouts and everything worked correctly.