Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default [4.2.0 beta 2] Auto layout issue

    [4.2.0 beta 2] Auto layout issue


    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>
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,054
    Vote Rating
    659
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    112
    Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all Daniil is a name known to all

      0  

    Default


    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.
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

Thread Participants: 1