Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-5456 in a recent build.
  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    85
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

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

    [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()
            });
    
        });
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You should set the html config instead of updating it on render.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    85
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


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

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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()
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    85
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    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.

  6. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,074
    Vote Rating
    854
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm simply saying that the html config is a much better option than using update()
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    85
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


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

  8. #8
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,346
    Vote Rating
    134
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Thanks for the report and the effort to boil down an example of the problem.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    85
    Vote Rating
    4
    lagnat is on a distinguished road

      0  

    Default


    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()
            });
    Attached Images

Thread Participants: 2