1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    260
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default 4.1 beta 2 potential layout regression

    4.1 beta 2 potential layout regression


    There may be a layout regression in 4.1 (unless its an intended change). You can see the difference running the example below in these screenshots. The regression appears in FF and Chrome.

    You will see the example includes two panels in a window. The second panel has a height:0 and flex:1 The change appears to be that in 4.0.7 the flex definition wins while in 4.1 beta 2 height wins.

    LayoutRegression41b2.png

    LayoutRegression407.png

    Code:
    Ext.define('Lyquidity.TaskDialog',{
        extend: 'Ext.window.Window',
        alias: 'widget.taskdialog',
    
    
        title: app,
        height: 200,
        width: 400,
        layout: {
            align: 'stretch',
            type: 'vbox'
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.apply(me,
            {
                items:    
                [
                    {
                        xtype: 'panel',
                        border: 0,
                        html: 'This is the main body of the message box',
                        id: 'mainPanel',
                        layout: {
                            type: 'fit'
                        },
                        bodyPadding: 10,
                        flex: 1
                    },
                    {
                        xtype: 'panel',
                        border: 0,
                        height: 0,
                        html: 'This is some text',
                        id: 'detailsPanel',
                        layout: {
                            type: 'fit'
                        },
                        bodyPadding: 10,
                        frameHeader: false,
                        flex: 1
                    }
                ]
            });
    
    
            me.callParent(arguments);
    
    
        }
    });

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,006
    Vote Rating
    650
    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


    Certainly the behaviour is different now, but I think it's "more correct" than it was before. An explicit dimension should trump anything else.

    Just curious, how did you end up with such a scenario?
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    260
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default


    I agree with you that the 4.1 way is better but I wonder how many support calls Sencha will receive because a layout appears to change inexplicably when using 4.1 as a developer had inadvertently set height:0 and it had no effect on the layout in earlier versions.

    I came across the scenario trying to address the issue described in the post below which appears to be a problem in 4.0.7 and 4.1 (though with different behaviors).

    http://www.sencha.com/forum/showthre...421#post730421

    Apologies for the length of this but I think there may be a real layout problem and I want to explain what I'm doing and why so you can explain to me why its not an issue.

    I want to be able to have text in a window that is collapsible but which is opened/closed by a button in a footer (the panel insists on the collapse header being adjacent to the panel content which I don't want). When expanded, I want the size of the text to be its natural size (which will vary from case to case) so using a flex definition or explicit height is not appropriate. I also expect the collapsible text will hug the bottom edge of the window (because the other component uses a flex:1 definition and so will use all unused space).

    My understanding is that I should be able to arrange this by using a vbox layout on the outer container (a window in my case) and setting flex:1 on the text/components that will always be displayed and by setting no height or flex on the panel/component I want to show selectively and be it's natural height. I could (and have) docked the collapsible text to the lower edge but it makes no difference to the layout problem I'm seeing.

    Using the 'html' property

    In the example on the end of the link above the text is assigned to the 'html' property of a panel. However there seem to be problems with the computed window size when the window is not given explicit dimensions. The window size computed by ExtJS 4.0.7 is always zero. Using 4.1 the window is the size of the component rendered is that of the logically last component, not all of the component which are displayed.

    Note that in 4.0.7 somewhere the correct height IS computed correctly. When the window is resized manually it snaps to the correct size and the dotted resize border is the correct size.

    Using the 'label' component makes no difference

    In the example below the required text is presented in a label component rather than the html property of a panel. But it makes no difference. However because the label background is transparent it does make it a bit easier to see what's going on: components are piled on top of each other.

    Bear in mind the window is set to use a vbox layout. If my understanding of this layout type is correct, I'd expect the second label will always appear beneath the first label (in the y direction not the z direction) not on top.

    LayoutExample1.png

    So the problem seems to be the handling of a component with no explicit flex or height when the container does not have an explicit height. Fix the height of the top component (My Label) and the window height used is correct (except that the top component now has a fixed height whereas what I want is for it to take all unused space and take at least enough for the ).

    Code:
    Ext.define('TaskDialog',{
        extend: 'Ext.window.Window',
        alias: 'widget.taskdialog',
    
    
        title: app,
        minWidth: 400,
        width: 400,
        layout: {
            type: 'vbox'
        },
    
    
        initComponent: function() {
            var me = this;
    
    
            Ext.apply(me,
            {
                items:    
                [
                    {
                        xtype: 'label',
                        id: 'title',
                        padding: '8 0 0 8',
                        style: 'color:#49D;font-weight:bold;font-size:12pt;',
                        text: 'My Label',
                        flex: 1
                    },
                    {
                        xtype: 'label',
                        id: 'details',
                        padding: '8',
                        text: 'My Label',
                    }
                ]
            });
    
    
            me.callParent(arguments);
    
    
        }
    });

Thread Participants: 1