Can't load layout widget within customer widget template

[renee zhu]

hello, dojo team

With dojo version before 1.3, I can use layout widget inside customer widget template with widgetsInTemplate : true

Now it can not be done in this way. so what is the standard solution for this kind of case that customer widget need complicate nested layout ? and why dojo didn't support it anymore ?

[renee zhu]

index.html

[renee zhu]

Desktop.js

[renee zhu]

Replying to renee zhu:

hello, dojo team

With dojo version before 1.3, I can use layout widget inside customer widget template with widgetsInTemplate : true

Now it can not be done in this way. so what is the standard solution for this kind of case that customer widget need complicate nested layout ? and why dojo didn't support it anymore ?

[renee zhu]

can anybody give some help here ?

[bill]

This was theoretically fixed in #9348 although I'm still seeing some issues. One problem is that the BorderContainer in your template isn't getting added to _supportingWidgets b/c it's the top level node in the template (this is a bug). That can be worked around by adding a wrapper <div> to your template.

However, the other problem is that although BorderContainer.startup() is being called, since BorderContainer thinks it's a child of Desktop, since Desktop is marked as a Container, it assumes that Desktop will call BorderContainer.resize() and thus doesn't try to resize itself.

In your case (or at least in your test case) you can simple remove the _Container inheritance in Desktop, and add in that extra wrapper <div> into the template, and then it works, but I'd like to resolve these issues properly.

[bill]

Still working on this. I've decided though that we can't support having a widget as the root node of a template, like your Desktop.html template:

<div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">
    ...
</div>

The problem is that in the generated DOM, the Desktop widget's id and the BorderContainer widget's id will try to be applied to the same node:

<div id="Desktop_0" widgetId="Desktop_0" id="borderContainer" widgetId="borderContainer">
...

Thus, you will need to have a wrapper div in your Desktop template:

<div>
    <div dojoType="dijit.layout.BorderContainer" design="sidebar" gutters="true" liveSplitters="true" id="borderContainer">
        ...
    </div>
</div>

[bill]

(In [19488]) Make this._supportingWidgets only contains the top level supporting widget(s), excluding nested widgets.

Refs #9477 !strict.

[bill]

(In [19496]) Although layout widgets (descendants of _LayoutWidget) call resize() on their children, plain _Container widgets do not, so the children must size themselves. Fixes #9477 !strict.

But see also #9657.