javascript - Dojo:如何创建包含布局小部件(边框容器)的小部件

Question

我想创建一个包含layoutWidget(例如BorderContainer)的小部件。

我通常创建小部件的方式是继承:

• _WidgetBase
• _TemplatedMixin
• _WidgetsInTemplatedMixin

IE:

  define([
        "dojo/_base/declare", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_WidgetsInTemplateMixin"
    ],
    function(
        declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin
    ) {
        return declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin] ,{

            templateString: template,
            ...

不幸的是，根据 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.

我已经证实这确实存在布局问题。创建包含layoutWidget的可重用小部件的推荐方法是什么？

选项:

• 继承自_LayoutWidget - 谁能推荐一个可以遵循的示例？

• 继承 _WidgetBase、_TemplatedMixin 和 _WidgetsInTemplatedMixin 并解决调整大小和启动方面的问题。这就是我目前正在做的事情，但我担心它可能有多脆弱。我发现，如果我在小部件上创建调整大小方法并在布局上调用调整大小，那么一切都会按预期工作(到目前为止)。我预计这可能并不总是有效，并且可能会引入棘手的错误。

  • 其他？

<小时/>

总结:

为了封装和复用的目的，我想创建一个widget。该小部件需要包含一个布局小部件(在本例中为 BorderContainer)。执行此操作的标准模式是什么？

Answer 1

您可以使用以下代码片段作为引用:

<div>
    <div data-dojo-type="dijit.layout.BorderContainer" 
        data-dojo-props="design:'headline'"
        style="width: 100%;height:100%;border:0"
        data-dojo-attach-point="bc">
        <div class="shadow" data-dojo-type="dijit.layout.ContentPane" style="padding:0"
            data-dojo-props="region:'top'">
        ...
    </div>
    <div data-dojo-type="dijit.layout.ContentPane" 
      data-dojo-props="region:'center'" style="padding:0">
      <div data-dojo-type="dijit.layout.TabContainer"
        data-dojo-attach-point="...">

        <div data-dojo-type="dijit.layout.ContentPane"
          data-dojo-attach-point="..." 
          title="Tab1" selected=true>
            Tab 1</div>

        <div data-dojo-type="dijit.layout.ContentPane"
          data-dojo-attach-point="..." style="padding:0"
          title="Tab2">
          Tab 2</div>

      </div>    
    </div>
  </div>
</div>

您可以使用适当的 JavaScript 代码。确保正确使用declare.safeMixin(this, args)以及postCreate和启动。

此外，如果您遇到渲染问题，您可以使用边框容器的附着点来调整大小。本质上，在启动代码之后，放置以下代码片段:

//kludge: fix for the F12/window resize issue
resize: function () {
    this.bc.resize(arguments);//bc is the atttachpoint name of the BorderContainer
    this.inherited(arguments);
}