Adding a collapsed panel to a window causes a rendering error in Ext JS 4

I'm following examples in the "ExtJS in Action" book and I ran into a problem with one of them. The code intends to add new panels to a window, unfortunately when the panels being added are collapsed by default, they are not rendered correctly.

Here is the code in question:

var childPnl1 = {
    frame: true,
    height: 50,
    html: 'My First Child Panel',
    title: 'First children are fun'
};

var myWin = new Ext.Window({
    height: 300,
    width: 300,
    title: 'A window with a container layout',
    autoScroll: true,
    items: [
        childPnl1
        ],
    tbar: [
        {
        text: 'Add child',
        handler: function() {
            var numItems = myWin.items.getCount() + 1;
            myWin.add({
                title: 'Child number ' + numItems,
        开发者_如何学Python        height: 60,
                frame: true,
                collapsible: true,
                collapsed: true,
                html: 'Yay, another child!'
            });
            myWin.doLayout();
        }}
    ]
});
myWin.show();

When I run it, I get the result presented in this fiddle: http://jsfiddle.net/PHaP4/

When I hit the 'Add child' button, the collapsed panels are rendered as very narrow elements, as if width was not properly set.

Is this a bug in Ext or is there a new way of doing this properly in ExtJS4?

The new public 4.0.7 release seems no to have this bug fixed yet.

Looks like a bug in ExtJS 4.0.2, and appears to be fixed in ExtJS 4.0.5. Here is what I found in the release notes:

[EXTJSIV-2547] - Child components not rendered.sized in initially collapsed, uncontained Panel.

My job has a premium account, so I was able to download and check 4.0.5. You'll have to wait for the general release, though.