边框容器区域无法在自定义小部件中正确显示

Border Container regions dont display properly in custom widget

本文关键字：小部 显示 自定义 区域 边框      更新时间：2023-09-26

我有一个dojo自定义小部件，它使用了一个带有边框容器的模板和带有顶部、顶部、中心、尾部和底部区域的内容窗格。问题是内容窗格从上到下显示，而不是以正确的布局格式显示：

这是我的模板：

<div>
 <div data-dojo-type="dijit/layout/BorderContainer" style="width: 100%; height: 100%">
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">Top pane</div>
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'leading'">Leading pane</div>
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">Center pane</div>
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'trailing'">Trailing pane</div>
     <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">Bottom pane</div>
</div>
</div>

这是我的小工具：

define([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin",
  "dijit/_WidgetsInTemplateMixin",
  "dojo/text!Templates/LandUse.htm",
   "dijit/registry",
    "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, LandUseTpl, registry) {
    return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
        templateString: LandUseTpl
    });
});

调用和插入模板的主页面：

<script>
...
LU = new LandUse({}, "tool");
...
</script>
<body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" id="Main" style="width: 100%; height: 100%">
     <div data-dojo-type="dojox/layout/ContentPane" id="TOC" data-dojo-props="splitter: true, region:'leading'">
     </div>
     <div data-dojo-type="dojox/layout/ContentPane" id="Content" data-dojo-props="splitter: true, region:'center'">
     <div id="tool"></div> <!--here is the insertion point-->
     </div> 
</div>
</body>

为什么显示为：

顶部窗格

前导窗格

中央窗格

后窗格

底部窗格

感谢

这是因为dijit/_WidgetsInTemplateMixin不支持像BorderContainer:这样的布局小部件

dijit_WidgetsInTemplateMixin mixin不支持添加布局小部件作为子部件。特别是startup（）和resize（）调用孩子们。

出于某种原因，它在控制台中抛出一个错误，表示您要注册的BorderContainer已经注册。因为小部件没有正确地呈现，所以它显示的是纯HTML，这就是您可以看到的结果。

正确的解决方案不是在模板中使用布局小部件，但似乎也可行的是以声明方式使用小部件。例如：http://jsfiddle.net/8vdu1u72/

相关文章：