dijit.layout._LayoutWidget onresize causes Infinite loop in IE

[nab]

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.

[bill]

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.

[pawel.skiba]

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

[bill]

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");