REQUIRED INFORMATION

Ext version tested:
  • Ext 4.2.0 beta 2
Browser versions tested against:
  • Chrome
  • IE9
DOCTYPE tested against:
  • <!DOCTYPE html>
Description:
  • A simple operation - hiding a tool - causes relayouting of all the topper containers.
  • The issue seems to be relevant to the default "auto" layout only, because setting up, for example, "fit" layout causes a container to be not relayouted.
  • I should also say that I recently saw The Ext JS 4 Layout System presentation by Jamie Avins and, actually, I understand why layouting bubbles from a child. But I am not sure it should bubble in this case. Maybe it just requires a fix in the "auto" layout.
  • I also understand that it can be very difficult to implement a generic way to determine parents should be relayouted or not. I just reported it to you to look at. Maybe, there is a bottleneck of performance.
Steps to reproduce the problem:
  • Click the Button
The result that was expected:
  • Relayouting of the underlying Panel only
The result that occurs instead:
  • Relayouting of all the containers upward the hierarchy
Test Case:

Code:
<!DOCTYPE html>
<html>
<head>
    <title>Auto layout issue</title>

    <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
    <script src="../ext-all-debug.js"></script>

    <script>
        Ext.onReady(function () {
            Ext.create("Ext.Viewport", {
                renderTo: Ext.getBody(),
                //layout: "fit", //this causes the Viewport to be not relayouted on hiding the tool
                listeners: {
                    afterlayout: {
                        fn: function (item, layout) {
                            console.log('Viewport AfterLayout');
                        }
                    }
                },
                items: [{
                    xtype: "container",
                    //layout: "fit", //this causes the Container to be not relayouted on hiding the tool
                    listeners: {
                        afterlayout: {
                            fn: function (item, layout) {
                                console.log('Container AfterLayout');
                            }
                        }
                    },
                    items: [{
                        collapsible: true,
                        listeners: {
                            afterlayout: {
                                fn: function (item, layout) {
                                    console.log('Panel AfterLayout');
                                }
                            }
                        },
                        items: [{
                            xtype: "button",
                            handler: function (btn) {
                                //Ext.suspendLayouts();
                                btn.up('panel').child('header').child("tool[type='collapse-top']").hide();
                                //Ext.resumeLayouts(); // it helps to avoid relayouting, but should I really use it explicitly?
                            },
                            text: "Hide Tool"
                        }]
                    }]
                }]                
            });
        });
    </script>
</head>
<body>

</body>
</html>