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
    975
    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

      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,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      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