Javascript Dojo：如何创建包含布局小部件（边框容器）的小部件

我想创建一个包含layoutWidget的小部件（例如BorderContainer）

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

• _WidgetBase
• _模板德米辛
• _Widgetsintemplateddmixin

即：

不幸的是，根据该报告：

dijit.\u WidgetsInTemplateMixin mixin不支持将布局小部件添加为子项。尤其是对子对象的startup（）和resize（）调用存在问题

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

选项：

• 继承自-有人能推荐一个这样的例子吗

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

---

总结如下：

---

为了封装和重用，我想创建一个小部件。小部件需要包含布局小部件（本例中为BorderContainer）。做这件事的标准模式是什么

您可以将以下代码片段提供给我们参考：

<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>

<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>

//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);
}