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

yxyvkwin  于 2022-12-16  发布在  Dojo
关注(0)|答案(3)|浏览(208)

我有一个嵌入的BorderContainer,当标记在主页面内时工作正常。当我移动带有模板的小部件内的边框容器标记时,出现了一些问题,边框容器将其左上角的所有子容器放置在彼此的顶部。
下面是一个极简主义的片段,显示了这个问题:http://embed.plnkr.co/cngYmG6BMKcUxwKQy2Du/
当我在本地运行dojo版本1.12.1时,也会发生同样的事情
你能告诉我我错过了什么吗?

oogrdqng

oogrdqng1#

您可以让它工作,但是您必须自己将调整大小请求转发到BorderContainer。
需要记住的一个规则是,如果Dojo布局小部件只有一个子小部件,那么它们将调用resize;如果有多个小部件,那么它不知道给每个小部件给予多少空间,它会举手示意,让您来计算大小。
为模板中的BorderContainer指定一个附加点名称data-dojo-attachpoint="bc",然后重载resize方法并转发resize请求。

isLayoutContainer: true,

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

这里假设BorderContainer是唯一值得调整大小的东西,也就是说,它占用了小部件的所有空间。
既然你现在是在你的孩子上调用resize,你的行为就像一个布局小部件,所以你也应该定义isLayoutContainer,如图所示。resize API没有很好的文档记录,isLayoutContainer更是如此。没有它,当你的窗口大小改变时,你可能会注意到额外的resize调用。
如果稍后在边框容器上方或下方创建内容,则需要相应地调整changeSize.w和changeSize. h,这在myWidget.resize()这样的调用中会变得更加困难,因为myWidget.resize()没有提供changeSize和resultSize,您必须使用当前大小或以其他方式计算它。dojo/dom-geometry在这种情况下很有用。

nzkunb0c

nzkunb0c2#

dijit._WidgetsInTemplateMixin文档中所述...
dijit._WidgetsInTemplateMixin混合不支持将布局小部件添加为子级。特别是在调用子级的startup()和resize()时存在问题。

n6lpvg4x

n6lpvg4x3#

正如刘易斯提到的,这不支持布局小部件作为子部件,我建议你使用编程方法,在主脚本中示例化小部件,如下所示:

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

相关问题