Serious layout Issue with ExtJs 4.1 and Chrome 25

**Sharkanana** · 28 Feb 2013 10:10 AM

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:

This post has a great example of the bug occurring:
http://www.sencha.com/forum/showthre...5-with-Ext-4.1

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

**mitchellsimoens** · 28 Feb 2013 1:16 PM

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

Screen Shot 2013-02-28 at 3.15.52 PM.png

**Sharkanana** · 28 Feb 2013 1:18 PM

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.

**TkDodo** · 4 Mar 2013 12:13 AM

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).

**evant** · 4 Mar 2013 4:45 PM

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

**kevhender** · 5 Mar 2013 12:22 PM

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.

**evant** · 5 Mar 2013 1:17 PM

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.

**kevhender** · 6 Mar 2013 6:48 AM

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.

**scottmartin** · 8 Mar 2013 11:57 AM

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.

**lachiandi** · 26 Mar 2013 12:29 AM

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

Serious layout Issue with ExtJs 4.1 and Chrome 25

Thread Tools

Search Thread

Display

Serious layout Issue with ExtJs 4.1 and Chrome 25

Serious layout Issue with ExtJs 4.1 and Chrome 25

Tags for this Thread