修改

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" });
        },

我用Google搜索并尝试了不同的事情。如你所见，我设置了doLayout - 提到的属性here。我还使用了BorderContainer之类的here in the last posting，并且我在创建像提到的here之类的TabContainer之后尝试调整它的大小。如果我调用包含小部件的postCreate - 或startup - 函数中的方法，那就无所谓了。

我尝试通过样式设置宽度和高度，或启动每个＆＃34; sub＆＃34;小部件。

当我调整浏览器窗口大小或通过打开/关闭developerspertools（F12）调整大小时，只有TabContainer才会显示。如果它显示它看起来像我想要它。唯一的问题是，当我直接检查DOM时，TabList的大小为0x0，与TabPaneWrapper的大小相同。

有人有任何想法吗？

修改

仅在BorderContainer上调用启动后，我得到以下结果：

tablist布局很奇怪，并且也没有显示所选程序选项卡的内容。窗口调整大小后，一切都恢复正常：

解决方案（摘要）

我通过在HTML模板中定义BorderContainer和TabContainer来检索最佳结果。不幸的是，tablist的布局仍然失败。 This answer为正确的tablist布局提供了解决方案：我的小部件没有包含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()方法。正如我在评论部分中提到的那样，在显示对话框之前创建对话框的内容非常重要。

在这个小提琴（代码的底端）是两个部分，它们调用两个相同的方法，只是转置。在第一个片段中，方法以错误的顺序调用。在第二个片段中，它们以正确的顺序被调用。

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

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

TabContainer仅在windowresize处显示选项卡

1 个答案:

修改