dijit 嵌入式 BorderContainer 在模板内部不起作用

Question

我有一个嵌入式 BorderContainer，当标记位于主页内时它可以正常工作。当我在带有模板的小部件内移动边框容器标记时，出现问题，边框容器将其所有子元素放在左上角并彼此重叠。

这是一个显示问题的简约片段： http://embed.plnkr.co/cngYmG6BMKcUxwKQy2Du/

当我运行在本地使用 dojo 版本 1.12.1

时会发生同样的事情

你能告诉我我错过了什么吗？

Answer 1

如 dijit._WidgetsInTemplateMixin 的文档中所述...

The dijit._WidgetsInTemplateMixin mixin does not support adding layout widgets as children. In particular there are issues with startup() and resize() calls to the children.

Answer 2

正如刘易斯所提到的，这不支持将布局小部件作为子项，我向您建议的是通过在主脚本中实例化小部件来使用编程方法，如下所示：

require(["dojo/_base/array", 
         'dojo/_base/declare',
         "dojo/parser", 
         "dojo/on", 
         "myapp/MyWidget", 
         "dijit/layout/ContentPane",
         "dijit/layout/BorderContainer", 
         'dojo/domReady!'], 
         function(array, declare, parser, on, MyWidget) {
            console.log("b4 parse ....") 
            parser.parse().then(function() {
                console.log("after parse ...."); 

                //create your widget here  
                new MyWidget({}).placeAt("borderContainer3"); 

            }); 
         }
);

您可以在这里找到定制的 Plunker。

Answer 3

您可以让它工作，但您必须自己将调整大小请求转发到 BorderContainer。

要记住的一条规则是，如果 Dojo 布局小部件只有一个 child 小部件，它们将调用调整大小。如果有多个小部件，它不知道要给每个小部件多少 space，请举起手来，由您决定大小。

为模板中的 BorderContainer 指定一个带有 data-dojo-attachpoint="bc" 的附加点名称。然后重载resize方法，转发resize请求

isLayoutContainer: true,

resize: function(changeSize, resultSize) {
    this.inherited(arguments);        
    this.bc.resize(changeSize, resultSize);
}

这假设 BorderContainer 是唯一值得调整大小的东西，即占用您的小部件的所有 space。

由于您现在在 children 上调用调整大小，您的行为就像一个布局小部件，因此您还应该定义 isLayoutContainer，如图所示。 resize API 没有很好的记录，isLayoutContainer 更是如此。如果没有它，您可能会在 window 大小更改时注意到无关的调整大小调用。

如果您稍后在边框容器上方或下方创建内容，则需要相应地调整 changeSize.w 和 changeSize.h。这在 myWidget.resize() 之类的调用中变得更加困难，其中未提供 changeSize 和 resultSize，您必须使用当前大小或以其他方式计算出来。 dojo/dom-geometry 在这种情况下很有帮助。

dijit 嵌入式 BorderContainer 在模板内部不起作用

dijit embedded BorderContainer does not work inside template

dojo

dijit.layout