ExtJs IE rendering issue

Question

Hi,

Below is a simple ext js code that i can't get to work correctly in IE (works fine in Firefox, and Chrome). The problem is that while it initially renders correctly , its messed up if i try resizing the 'west' panel. Can someone please point out the issue

var viewport = new Ext.Viewport({
                layout: "border",
                items: [{
                    xtype: "panel",
                    region: "west",
                    frame: true,
                    collapsible: true,
                    width: 200,
                    baseCls: 'x-plain',
                    collapseMode:'mini',
                    split:true,
                    items:[{
                        xtype:"panel",
                        collapsible:true,
                        titleCollapse:true,
                        title:'Test1',
                        height: 200,
                        frame: true,
                        border:true
                    }]
                }, {
                xtype: "panel",
                region:"center"

                }]
            })

Answer 1

Maybe ExtJS forum can help you?

Answer 2

Any container that contains other panels or components usually requires a layout to work correctly. Try adding layout:'fit' to the west panel and see if that helps. Looking at your code though, I'm not sure why you would need a nested panel there (unless this is just test code). The west panel should simply contain whatever content you are planning on putting into the nested panel. If the goal is to add multiple child panels to west, then you would give west a layout like 'border' or whatever makes sense.

Answer 3

For a short hint you may try to answer the question:

What is layout of 'center' region?

With border layout I can see only one region, and it called 'west'. This shouldn't work as expected.