Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User Sharkanana's Avatar
    Join Date
    Nov 2011
    Location
    Charlotte, NC
    Posts
    39
    Vote Rating
    0
    Sharkanana is on a distinguished road

      0  

    Default Serious layout Issue with ExtJs 4.1 and Chrome 25

    Serious layout Issue with ExtJs 4.1 and Chrome 25


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.1
    Browser versions tested against:
    • Chrome 24
    • Chrome 25
    • FF
    • IE9 with Chrome Frame 25
    DOCTYPE tested against:
    • None
    Description:
    • Related to the question: http://www.sencha.com/forum/showthre...5-with-Ext-4.1
    • When using our extjs application, after upgrading to chrome 25 our users occasionally see all their windows/forms/everything with a layout completely go haywire.
    • This was never an issue before the chrome 25 update
    • Some examples of what you see:
      • Close button of window appears on left side
      • Form fields all drops down to be displayed vertically
      • Panels will be blank
    Steps to reproduce the problem:
    • Use an extjs 4.1 app with chrome 25
    The result that was expected:
    • It works normally
    The result that occurs instead:
    • Layouts are all corrupted
    Test Case:

    To use this, just click the button and let it run for a while. It will eventually corrupt the layout of the window.
    It seems to happen more often on slower computers.

    Code:
    <html>
    <head>
        <title>Combo test</title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all-gray.css">
        <script type="text/javascript" src="extjs/ext.js"></script>
        <script type="text/javascript">
    
    
            Ext.require('Ext.*');
    
    
            Ext.onReady(function() {
    
    
                var count = -1;
    
    
                var fields = [];
                for(var i = 0; i < 50; i++)
                {
                    fields.push({ name: 'textA'+i, type: 'string'});
                    fields.push({ name: 'textB'+i, type: 'string'});
                }
    
    
                Ext.define('TestModel', {
                    extend: 'Ext.data.Model',
                    fields: fields
                });
    
    
                var record = Ext.create('TestModel');
                for(i = 0; i < 50; i++)
                {
                    record.set('textA'+i, 'wtf man 1');
                    record.set('textB'+i, 'wtf man 2');
                }
    
    
                // Create the combo box, attached to the states data store
                Ext.create('Ext.Button', {
                    renderTo: Ext.getBody(),
                    text: 'Open Window',
                    margin: 10,
                    handler: function(btn)
                    {
                        test(btn);
                    }
                });
    
    
                function test(btn)
                {
                    if(btn.openFlag)
                    {
                        delete btn.openFlag;
                        btn.window.close();
                        btn.window.destroy();
                    }
                    else
                    {
                        count = 0;
                        btn.openFlag = true;
    
    
                        btn.window = new Ext.window.Window({
                            height: 500,
                            width: 500,
                            layout: 'fit',
                            items: [{
                                xtype: 'form',
                                layout: {
                                    type: 'vbox',
                                    align: 'stretch'
                                },
                                items: [
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox(),
                                    createSimpleHBox()
                                ]
                            }]
                        });
    
    
                        btn.window.show(true, function() {
                            btn.window.down('form').loadRecord(record);
                        });
                    }
    
    
                    Ext.defer(function()
                    {
                        test(btn);
                    }, 2000);
                }
    
    
                function createSimpleHBox()
                {
                    count++;
    
    
                    return {
                        layout: {
                            type: 'hbox',
                            align: 'stretch'
                        },
                        defaults: {
                            flex: 1,
                            fieldLabel: 'Text'
                        },
                        items: [
                            {
                                xtype: 'textfield',
                                name: 'textA' + count
                            },
                            {
                                xtype: 'textfield',
                                name: 'textB' + count
                            }
                        ]
                    };
                }
    
                function pausecomp(millis)
                {
                    var date = new Date();
                    var curDate = null;
                    do { curDate = new Date(); }
                    while(curDate-date < millis);
                }
    
            });
    
        </script>
    </head>
    <body>
    </body>
    </html>
    HELPFUL INFORMATION

    Screenshot or Video:Debugging already done:
    • Doesn't happen in Chrome 24, or Firefox. Happens in Chrome 25 and IE9 with Chrome 25 Frame
    Possible fix:
    • Don't use chrome 25....

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,643
    Vote Rating
    816
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Testing with Chrome and 4.1.3 I get this which looks right:

    Screen Shot 2013-02-28 at 3.15.52 PM.png
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User Sharkanana's Avatar
    Join Date
    Nov 2011
    Location
    Charlotte, NC
    Posts
    39
    Vote Rating
    0
    Sharkanana is on a distinguished road

      0  

    Default


    Yea, there is a timer and it opens and closes for a while. Like I said, it happens sporadically so it may take a few window creations to occur.

    Also, it seems the faster your computer the less likely it is to occur.

  4. #4
    Sencha User
    Join Date
    Mar 2013
    Posts
    7
    Vote Rating
    0
    TkDodo is on a distinguished road

      0  

    Default


    Hi,

    We are having the same issue with our application. Here are some things that I found out:

    .) It seems to have something to do with Windows. If I remove all the Windows from our application, the rest works fine. If I add the Windows again, everything (not only the Windows, but some other Panels as well) will be completely messed up after some time.
    .) If I stop at a Breakpoint in the Developer Tools, the Layout is fine afterwards, even if it was "broken" before. That makes it extremely difficult to debug. It also may indicate some form of timing issue.
    .) On the contrary to what you are saying, I believe it is more likely to appear on faster computers.
    .) Unfortunately, I tested your example and could not reproduce the bug with it (I let it run for half an hour).

  5. #5
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,663
    Vote Rating
    584
    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


    Out of interest, is it also reproducible using the latest 4.2 RC? The fact that it only happens sometimes indicates that it might be a Chrome bug in a similar vein to: https://groups.google.com/a/chromium...gs/0Z2-DKM8LBM
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    65
    Vote Rating
    1
    kevhender is on a distinguished road

      0  

    Default


    Evan, it does appear to be something similar to this.

    Once the layouts are "broken", in any future calls to ContextItem.flush, me.dirty is not complete; it is missing the x component. Interestingly, if you but a breakpoint ANYWHERE in the process, it seems to correct itself and continue on correctly.

    I will attempt to continue debugging up the trail, but if my post gives you any insight as to how to proceed, I would appreciate your thoughts. Thanks.

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


    During your testing, can you make sure you swap in ext-all-dev, it almost looks like you're getting a layout failure, the dev version has some extra debug statements to let you know about that.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  8. #8
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    65
    Vote Rating
    1
    kevhender is on a distinguished road

      0  

    Default


    You are correct, Evan, that we are getting layout errors. The only additional info provided by the ext-dev file is the logged statement "Layout run failed."

    What is so peculiar is that the layouts for these windows work some of the time, and fails sporadically. Also, this is only happening in Chrome 25. It does seem likely this is a Chrome bug similar to the one you mentioned above. Has anyone at Sencha been able to replicate this error? Do you have any other insights about how to debug? Thanks.

  9. #9
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,884
    Vote Rating
    440
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Ran the example for 15 minutes using 4.1.3 and Chrome: Version 25.0.1364.160

    I was not able to duplicate the problem.

    Scott.

  10. #10
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    1
    Vote Rating
    0
    lachiandi is on a distinguished road

      0  

    Default


    I have quite a similar application setup as TkDodo described earlier this thread. I systematically removed all complex code and re-added components step by step.

    As I dynamically calculate the size of the windows I am dividing the width and height of the viewport by a constant. It seems that the application was broken because of floating (periodic) numbers for setting the window size.

    For my application the issue was fixed by flooring/rounding the width and the height before calling window.setWidth(x) and window.setHeight(x).

    Unfortunately this still does not explain why the application recovered/didn't break when setting a breakpoint somewhere in the code...