[4.2.0.489 beta] ButtonGroup inside the panel with BorderLayout causing panel refresh

[Baidaly]

REQUIRED INFORMATION


Ext version tested:

• Ext 4.2.0.489 beta

Browser versions tested against:

• IE9
• FF19.0

Description:

• ButtonGroup inside the panel with BorderLayout causing panel refresh issue

Steps to reproduce the problem:

• Create the ViewPort
• Create the panel in the center of the ViewPort with tbar and bbar.
• Create the hidden and collapsible panel in the south region of the ViewPort
• The top toolbar of the center panel should be with Button Group and with two button to Hide and Show the south panel.
• Click on the Show button

The result that was expected:

• The center panel should display top and bottom bars

The result that occurs instead:

• The center panel doesn't show top and bottom bars

Test Case:

   Ext.onReady(function () {
    Ext.create("Ext.container.Viewport", {
        renderTo: Ext.getBody(),
        items: [{
            id: "ExternalPanelCenter",
            border: false,
            region: "center",
            items: [{
                id: "InternalPanelCenter",
                region: "center",
                bbar: {
                    xtype: "pagingtoolbar",
                    items: [{
                        text: "Show",
                        listeners: {
                            click: {
                                fn: function (item, e) {
                                    Ext.getCmp('InternalPanelSouth').show();
                                }
                            }
                        }
                    }, {
                        text: "Hide",
                        listeners: {
                            click: {
                                fn: function (item, e) {
                                    Ext.getCmp('InternalPanelSouth').hide();
                                }
                            }
                        }
                    }],
                    displayInfo: true
                },
                tbar: {
                    xtype: "toolbar",
                    items: [{
                        xtype: "tbfill"
                    }, {
                        style: "background-color: #CFFFCF;",
                        xtype: "buttongroup",
                        items: [{
                            text: "A"
                        }, {
                            text: "B"
                        }]
                    }, {
                        id: "ToolbarFill1",
                        xtype: "tbfill"
                    }]
                },
                title: "Internal Panel - Center"
            }, {
                id: "InternalPanelSouth",
                border: false,
                height: 240,
                hidden: true,
                region: "south",
                split: true,    
                layout: "border",
                collapsible: true,
                header: false,
                hideCollapseTool: true,
                title: "Internal Panel - South",
                titleCollapse: true,
                html: 'Lorem ipsum'
            }],
            layout: "border",
            title: "External Panel - Center"
        }],
        layout: "border"
    });
});

HELPFUL INFORMATION

Screenshot or Video:
1.jpg


Debugging already done:

• none

Possible fix:

• Call External panel's doLayout method

Additional CSS used:

• only default ext-all.css

Operating System:

• Win7 Pro

[evant]

This was causing a layout failure but it's already been resolved for the next release.

Thanks for the test case.

[Baidaly]

Thank you for your response!

[wolcott]

Great. This has actually been a bug since ExtJS 4.2 beta back in December. Do you know what tracking number this was assigned to (EXTJSIV-????).