TabContainer 仅在 windowresize 时显示 Tabs

Question

我想创建一个 Tabcontainer 并以编程方式填充其 TabPage 内容，但 TabPages 不会显示。到目前为止我的代码：

        _buildUI: function () {
            var bordercontainer = new dj_BorderContainer({ style: "height: 100%; width: 100%;", gutters: false, region: "top" });
            var tabcontainer = new dj_TabContainer({ useMenu: false, region: "center", tabposition: "top", doLayout: "false", style: "height: 100%; width: 100%;" });

            for (var i = 0; i < ki_KisConfig.widgets.movingwindow.calccount; i++) {
                var contentpane = new dj_ContentPane({ title: "Calculation " + (i + 1), content: "content", style: "height: 100%; width: 100%;" });

                //contentpane.startup();
                tabcontainer.addChild(contentpane);
            }

            tabcontainer.startup();
            bordercontainer.addChild(tabcontainer);
            bordercontainer.startup();
            do_domConstruct.place(bordercontainer.domNode, this.interface, "first");
            bordercontainer.resize({ h: "265px", w: "432px" });
        },

我用谷歌搜索并尝试了不同的方法。如您所见，我正在设置提到的 doLayout-属性 here. I also use a BorderContainer like mentioned here in the last posting and I'm trying to resize it after creating the TabContainer like mentioned here。不管我是在 postCreate 中调用方法，还是在包含小部件的 startup 函数中调用方法。

我正在尝试通过样式设置宽度和高度，或者尝试在每个 "sub" 小部件上启动。

没有任何效果，TabContainer 仅在我调整浏览器大小时window 或通过 opening/closing 开发者工具 (F12) 调整大小时显示。如果它被显示出来，它看起来就像我想要的。唯一的问题是当我直接检查 DOM.

时，TabList 的大小为 0x0，与 TabPaneWrapper 相同

有人知道吗？

编辑

仅在 BorderContainer 上调用启动后，我得到了这个结果：

标签列表布局很奇怪，而且程序化选择的标签的内容也没有显示。 window 调整大小后一切又好了：

解决方案（总结）

我通过在 HTML 模板中定义 BorderContainer 和 TabContainer 获得了最佳结果。不幸的是，tablist 的布局仍然失败。 This answer 提供了正确的标签列表布局的解决方案：我的小部件不包含 resize() 所以我添加了它，现在一切正常。

        resize: function() {
            var tabcontainer = dj_registry.byId("tabContainerMW");
            if (tabcontainer) {
                tabcontainer.resize(arguments);
            }
        },

Answer 1

您的代码的一些注释：

此处不需要 region 属性。它仅用于指示 BorderContainer 子项的位置。

var bordercontainer = new dj_BorderContainer({
  style: "height: 100%; width: 100%;",
  gutters: false,
  region: "top"
});

您不需要在 ContentPane 上设置宽度和高度，让 TabContainer 这样做。

var contentpane = new dj_ContentPane({
  title: "Calculation " + (i + 1),
  content: "content",
  style: "height: 100%; width: 100%;"
});

我已经为你创建了一个示例，也许这对你有帮助。

require(["dijit/layout/BorderContainer", "dijit/layout/TabContainer",
  "dijit/layout/ContentPane", "dojo/domReady!"],
function(BorderContainer, TabContainer, ContentPane) {
  
  // first create the BorderContainer without any arguments.
  let bc = new BorderContainer({}, "bc");
  
  // then create your TabContainer with region center.
  let tc = new TabContainer({
    region: 'center'
  }, document.createElement("div"));
  
  // add it to your BorderContainer
  bc.addChild(tc);
  
  
  // then create three tab panes (ContentPane) and add them to your TabContainer
  let cp = new ContentPane({
    content: "My tab pane!",
    title: "My tab title"
  }, document.createElement("div"));
  tc.addChild(cp);
  
  let cp2 = new ContentPane({
    content: "My second tab pane!",
    title: "My second tab title"
  }, document.createElement("div"));
  tc.addChild(cp2);
  
  
  let cp3 = new ContentPane({
    content: "My closable tab pane!",
    title: "My closable tab title",
    closable: true
  }, document.createElement("div"));
  tc.addChild(cp3);
  
  // call startup on your BorderContainer. startup of BorderContainer will call also the startup methods of all children (TabContainer, ContentPane's).
  bc.startup();

});

body, html {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
}

<link href="//ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<span class="tundra" style="width: 100%; height: 100%;">
  <div id="bc" style="width: 100%; height: 100%;"></div>
</span>

编辑

作为补充：我能够创建一个重现失败的 fiddle。这里的问题是 createDialogContent() 方法在对话框显示后被调用。正如我在评论部分下面提到的，在显示之前创建对话框的内容很重要。

在此fiddle（代码的底部）有两个部分，它们调用相同的方法，只是调换了位置。在第一个片段中，方法的调用顺序错误。在第二个片段中，它们的调用顺序正确。

   // uncomment this
   createDialogContent(); 
   dialog.show();

  // comment this
  // dialog.show();
  // createDialogContent();

TabContainer 仅在 windowresize 时显示 Tabs

TabContainer displays Tabs only at windowresize

dojo

dijit.layout

编辑