[4.1 20120221] Expanding a panel in a border layout with dynamic content bug

Sorry the title couldn't be more descriptive. This is difficult bug to describe in the space allotted for the title.

In the sample below, there is a panel with border layout. The panel has a collapsed west region and the west region has a single child that updates its content in a render event.

Upon expanding the west region with the expand icon, the panel will have the normal header but the placeholder header will still be present. See attached picture.

Upon expanding the west region by clicking on the body of the placeholder header, two placeholder headers will be present. See attached picture.

If the west region is expanded by default, there is no problem.

Removing the update() call in the child panel restores the expected behavior.

Code:

---

    Ext.onReady(function() {

        Ext.create('Ext.panel.Panel', {
            width: 500,
            height: 400,
            x: 20,
            y: 20,
            title: 'Border Layout',
            layout: 'border',
            items: [{
                title: 'Expand me please',
                region:'west',
                xtype: 'panel',
                width: 200,
                collapsible: true,
                collapsed: true,
                layout: 'fit',
                items: [{
                    title: 'Some Panel',
                    listeners: {
                        render: function() {
                            this.update("I've been rendered!");
                        }
                    }
                }]
            },{
                title: 'Center Region',
                region: 'center'
            }],
            renderTo: Ext.getBody()
        });

    });

---

You should set the html config instead of updating it on render.

That is a boiled down sample. Are you suggesting that there isn't a bug here?

This only happens when it is trying to render. If you delay it 10ms it will not happen.

Code:

---

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 400,
    x: 20,
    y: 20,
    title: 'Border Layout',
    layout: 'border',
    items: [{
        title: 'Expand me please',
        region:'west',
        xtype: 'panel',
        width: 200,
        collapsible: true,
        collapsed: true,
        layout: 'fit',
        items: [{
            title: 'Some Panel',
            listeners: {
                delay : 10,
                render: function() {
                    this.update("I've been rendered!");
                }
            }
        }]
    },{
        title: 'Center Region',
        region: 'center'
    }],
    renderTo: Ext.getBody()
});

---

I'm still not sure if you're telling me that this isn't a bug. Are you?

As to the workaround, it's not practical. The west region in my app has an accordion in it, and the accordion can contain several of many components. The components themselves don't know about the existence of the accordion or the existence of the west region. I can't be expected to delay every listener in every component I write just because it *might* end up in that west region, right?

The specifics of my app don't allow me to specify the HTML in the config because the content that I need to render depends on things that can change between the time the config is written and west region is expanded.

Also note that it's not just update() that can cause that problem. That was just the simplest way for me to narrow it down and demonstrate it.

I'm simply saying that the html config is a much better option than using update()

Oh, ok. Just wondering why I didn't get an [OPEN] on this thread.

Thanks for the report and the effort to boil down an example of the problem.

It seems my original test case is working fine with RC1, but here's another test case that fails to work properly.

Code:

---


        Ext.create('Ext.panel.Panel', {
            width: 500,
            height: 400,
            x: 20,
            y: 20,
            title: 'Border Layout',
            layout: 'border',
            items: [{
                title: 'Expand me please',
                region:'west',
                xtype: 'panel',
                width: 200,
                collapsible: true,
                collapsed: true,
                layout: 'accordion',
                items: [{
                    title: 'Some Panel',
                    listeners: {
                        render: function() {
                            this.update("I've been rendered!");
                        }
                    }
                }, {
                    title: 'Some Panel',
                    listeners: {
                        render: function() {
                            this.update("I've been rendered!");
                        }
                    }
                }]
            },{
                title: 'Center Region',
                region: 'center'
            }],
            renderTo: Ext.getBody()
        });

---