Opened 10 years ago

Closed 9 years ago

#10428 closed defect (invalid)

dijit.layout._LayoutWidget onresize causes Infinite loop in IE

Reported by: nab Owned by:
Priority: high Milestone: tbd
Component: Dijit Version: 1.4.0b
Keywords: Cc:
Blocked By: Blocking:

Description

Here attached a test file a copy of "dijit/tests/layout/test_StackContainer.html".

In the test file I tried to create a widget embedded in a GridContainer?. This widget extends (which extends dijit.layout._LayoutWidget), _Templated? and a child ContentPane? is added to it. In my widgte's template string I included a css style class to modify the border style.

When I run my test file on IE, this causes 100% CPU utilization.

After debuging I've noticed that at the widget startup, it performs the inherited class _LayoutWidget and its child resize functions. Then the inherited class registers an "onresize" connection to resize the widget if its child's size changes. But before the end of widget startup, the connection listener catches the widget's child "onresize" event and triggers the registered function resize. This calls _LayoutWidget and my widget's child resize functions again and so on...

This problem does not occur when I remove the css class included in the widget's template string.

Attachments (1)

test_StackContainer_2.html (3.2 KB) - added by nab 10 years ago.

Download all attachments as: .zip

Change History (4)

Changed 10 years ago by nab

Attachment: test_StackContainer_2.html added

comment:1 Changed 10 years ago by bill

Priority: highestnormal
Resolution: invalid
severity: blockerminor
Status: newclosed

Thanks for the test case, I see it spinning on IE. I ran the debugger on this and the TestPane (w/id=azerty) keeps getting bigger and bigger on each resize() call. The hierarchy you've made is:

BorderContainer --> dojox.layout.GridContainer --> TestPane --> ContentPane

Since TestPane (which is basically a StackContainer) does not have a layout widget parent (ie, since GridContainer won't set the size of it's children), you need to set a size on the TestPane. I added a style to the TestPane and then it works fine:

var widget = new wDojo.dijit.TestPane({
    id:"azerty",
        style: {width: "300px", height: "300px"}
} , "div");

History:

In 1.3 there was code in _LayoutWidget.js to detect duplicate resize events where nothing had really changed:

this._viewport = dijit.getViewport();
this.connect(dojo.global, 'onresize', function(){
        var newViewport = dijit.getViewport();
        if(newViewport.w != this._viewport.w ||  newViewport.h != this._viewport.h){
                this._viewport = newViewport;
                this.resize();
        }
});

This was to workaround a similar IE problem. However for 1.4, that code was changed so that IE monitored resize events on the widget DOMNodes, rather than on the viewport itself. (This is a better design, but unfortunately only IE supports that event.):

this.connect(dojo.isIE ? this.domNode : dojo.global, 'onresize', function(){
        // Using function(){} closure to ensure no arguments to resize.
        this.resize();
});

With the new code it seemed that guard code in IE was no longer necessary.

comment:2 Changed 9 years ago by pawel.skiba

Resolution: invalid
Status: closedreopened

This bug is still exist. When I resize test_StackContainer_2.html on IE, this causes 100% CPU utilization. IE v6.0 windows xp

comment:3 Changed 9 years ago by bill

Resolution: invalid
Status: reopenedclosed

Yes, that's expected behavior. As I wrote above:

Since TestPane (which is basically a StackContainer) does not have a layout widget parent (ie, since GridContainer won't set the size of it's children), you need to set a size on the TestPane. I added a style to the TestPane and then it works fine:

var widget = new wDojo.dijit.TestPane({
    id:"azerty",
        style: {width: "300px", height: "300px"}
} , "div");
Note: See TracTickets for help on using tickets.