Results 1 to 9 of 9

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

    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
    117
    Vote Rating
    4
      0  

    Default [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 Attached Images

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,060
    Vote Rating
    1389
      0  

    Default

    You should set the html config instead of updating it on render.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  3. #3
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    117
    Vote Rating
    4
      0  

    Default

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

  4. #4
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,060
    Vote Rating
    1389
      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 @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  5. #5
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    117
    Vote Rating
    4
      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 User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,060
    Vote Rating
    1389
      0  

    Default

    I'm simply saying that the html config is a much better option than using update()
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    ________________
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:
    https://github.com/mitchellsimoens

  7. #7
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    117
    Vote Rating
    4
      0  

    Default

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

  8. #8
    Sencha User dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,742
    Vote Rating
    258
      0  

    Default

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

    "Use the source, Luke!"

  9. #9
    Ext JS Premium Member
    Join Date
    Oct 2007
    Posts
    117
    Vote Rating
    4
      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 Attached Images

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •