[4.2.0 beta 2] Auto layout issue

**Daniil** · 13 Feb 2013 9:44 PM

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>

**evant** · 13 Feb 2013 10:23 PM

This is something we've been investigating internally, it's very difficult to do so in a generic manner, but it's something we're looking to improve over time.

**Daniil** · 13 Feb 2013 10:30 PM

Nice to hear that. Thank you.

I am sorry to ask you here, but these ones seems to be escaped from the attention of the ExtJS team.
http://www.sencha.com/forum/showthread.php?255890
http://www.sencha.com/forum/showthread.php?255370

It would be awesome if you could take a look.

[4.2.0 beta 2] Auto layout issue

Thread Tools

Search Thread

Display

[4.2.0 beta 2] Auto layout issue

[4.2.0 beta 2] Auto layout issue