Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-10312 in 4.2.2.1144.
  1. #1
    Sencha User Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    977
    Vote Rating
    113
    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

      1  

    Default [4.2.1 GA] Column layout can crash if vertical scrolling

    [4.2.1 GA] Column layout can crash if vertical scrolling


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.1
    Browser versions tested against:
    • Chrome
    • IE9
    DOCTYPE tested against:
    • <!DOCTYPE html>
    Description:
    • A column layout can crash if vertical scrolling. The test case below produces "Layout run failed" caused by a not finished column layout. Well, the test case layout can look fake, it is just a stripped down version of the real page. See the comments in the test case.
    • The problem is partially discussed here.
    Steps to reproduce the problem:
    • Just run the test case
    The result that was expected:
    • No "Layout run failed"
    The result that occurs instead:
    • "Layout run failed" occurs
    Test Case:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Column layout can crash if vertical scrolling</title>
    
        <link rel="stylesheet" href="../resources/css/ext-all.css" />
    
        <script src="../ext-all-dev.js"></script>
    
        <script>
            Ext.onReady(function () {
                Ext.create("Ext.Viewport", {
                    renderTo: Ext.getBody(),
                    layout: "fit",
                    items: [{
                        autoScroll: true, // Remove it and the issue goes.
                        layout: {
                            type: "vbox",
                            align: "stretch"
                        },
                        items: [{
                            heigt: 400,
                            //flex: 1, // Uncomment it and remove "height: 400" and the issue goes.
                            layout: {
                                type: "hbox",
                                align: "stretch"
                            },
                            items: [{
                                flex: 1,
                                layout: {
                                    type: "hbox",
                                    align: "stretch"
                                },
                                items: [{
                                    flex: 1,
                                    layout: {
                                        type: "vbox",
                                        align: "stretch"
                                    },
                                    items: [{
                                        flex: 1,            
                                        items: [{ // Remove it and the issue goes.
                                            title: "Title" 
                                        }]
                                    }]
                                }, {
                                    flex: 1,
                                    layout: {
                                        type: "vbox",
                                        align: "stretch"
                                    },
                                    items: [{
                                        height: 3000,  // Made it big to ensure you get vertical scrolling. Make it smaller to avoid vertical scrolling and the issue goes.
                                        layout: {
                                            type: "vbox",
                                            align: "stretch"
                                        },
                                        items: [{
                                            xtype: "tabpanel",
                                            flex: 1,
                                            items: [{
                                                xtype: "panel",
                                                title: "Music Oriented",
                                                layout: "column",
                                                autoScroll: true, // Remove it and the issue goes.
                                                items: [{
                                                    columnWidth: 1,
                                                    items: [{
                                                        xtype: "panel",
                                                        layout: "fit",
                                                        items: [{  // Remove it and the issue goes.
                                                            title: "Title"
                                                        }]
                                                    }]
                                                }]
                                            }]
                                        }]
                                    }]
                                }]
                            }]
                        }]                    
                    }]
                });
            });
        </script>
    </head>
    <body>
    </body>
    </html>



    HELPFUL INFORMATION


    Debugging already done:
    • Debugging the Auto layout's calculate and calculateOverflow methods sheds some light on the problem.
    Code:
    Ext.layout.container.Column.override({
        calculate: function(ownerContext) {
            var me = this,
                state = ownerContext.state,
                containerSize = me.getContainerSize(ownerContext, true),
                // If subclass has a calculateItems method, call it and cache the result
                calculatedItems = state.calculatedItems ||
                    (state.calculatedItems = me.calculateItems ?
                    me.calculateItems(ownerContext, containerSize) : true);
    
            me.setCtSizeIfNeeded(ownerContext, containerSize);
    
            if (calculatedItems && ownerContext.hasDomProp('containerChildrenSizeDone')) {
    
                me.calculateContentSize(ownerContext);
    
                if (containerSize.gotAll) {
                    if (me.manageOverflow && !ownerContext.state.secondPass && !me.reserveScrollbar) {
                        me.calculateOverflow(ownerContext, containerSize); // (1) It is executed on one of "calculate" calls
                    }
                    return;
                }
            }
            
            me.done = false;
        },
                
        calculateOverflow: function (ownerContext) {
            var me = this,
                width, height, scrollbarSize, scrollbars, xauto, yauto, targetEl;
    
            // Determine the dimensions that have overflow:auto applied. If these come by
            // way of component config, this does not require a DOM read:
            xauto = (me.getOverflowXStyle(ownerContext) === 'auto');
            yauto = (me.getOverflowYStyle(ownerContext) === 'auto');
    
            if (xauto || yauto) {
                scrollbarSize = Ext.getScrollbarSize();
                targetEl = ownerContext.overflowContext.el.dom;
                scrollbars = 0;
    
                if (targetEl.scrollWidth > targetEl.clientWidth) {
                    // has horizontal scrollbar
                    scrollbars |= 1;
                }
    
                if (targetEl.scrollHeight > targetEl.clientHeight) {
                    // has vertical scrollbar
                    scrollbars |= 2;
                }
    
                width = (yauto && (scrollbars & 2)) ? scrollbarSize.width : 0;
                height = (xauto && (scrollbars & 1)) ? scrollbarSize.height : 0;
    
                if (width !== me.lastOverflowAdjust.width || height !== me.lastOverflowAdjust.height) { // (2) The red condition meets (there 0 !== 17) if vertical scrolling
                    me.done = false; // (3) It marks a layout that it is not finished. 
                                     // Then the calculate method is called again twice, but the layout is not marked as done again.
    
                    // we pass overflowAdjust and overflowState in as state for the next
                    // cycle (these are discarded if one of our ownerCt's invalidates):
                    ownerContext.invalidate({
                        state: {
                            overflowAdjust: {
                                width: width,
                                height: height
                            },
                            overflowState: scrollbars,
                            secondPass: true
                        }
                    });
                }
            }
        }
    });
    Ext.NET - ASP.NET for Ext JS
    MVC and WebForms
    Examples | Twitter

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      0  

    Default


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Location
    Paris
    Posts
    111
    Vote Rating
    1
    Tchinkatchuk is on a distinguished road

      0  

    Default


    Any news of this issue ?

Thread Participants: 2