TabContainer 仅在 windowresize 时显示选项卡

Posted 2023-02-16

【中文标题】TabContainer 仅在 windowresize 时显示选项卡

【英文标题】：TabContainer displays Tabs only at windowresize

【发布时间】：2016-07-25 11:26:24

【问题描述】：

我想创建一个 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 属性。我还使用了BorderContainer，就像提到的here in the last posting 一样，我正在尝试在创建TabContainer 之后调整它的大小，就像提到的here 一样。 我是在 postCreate- 还是在包含小部件的 startup- 函数中调用方法都没有关系。

我正在尝试通过样式设置宽度和高度或启动每个“子”小部件。

没有任何效果，并且 TabContainer 仅在我调整浏览器窗口的大小或通过打开/关闭开发者工具 (F12) 来调整它的大小时显示。如果它显示出来，它看起来就像我想要的一样。唯一的问题是TabList 的大小为 0x0，当我直接检查 DOM 时与TabPaneWrapper 相同。

有人知道吗？

编辑

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

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

解决方案（摘要）

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

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

【问题讨论】：

一般是因为父节点大小为0，能不能做个jsfiddle给我们看看？

父节点的大小大于零。我通过设置宽度和高度来确保这一点，并通过 dom-inspection 进行了检查。

【参考方案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() 方法在对话框显示后被调用。正如我在下面的 cmets 部分中提到的，在显示之前创建对话框的内容很重要。

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

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

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

【讨论】：

谢谢！启动的事情就是这样。如果我只从 BorderContainer 调用启动，则 TabContainer 会立即显示。不幸的是，布局失败了。调整窗口大小后，所有内容都将以正确的方式显示。我会发布一个截图作为编辑。

啊..我还删除了您在开头提到的样式和区域内容。我在玩耍时添加了它以使这些东西正常工作。其余布局问题不受这些更改的影响。

您是否尝试将 BorderContainer 添加到 dijit.Dialog？如果可以，可以发一下代码吗？也许错误是在那里引起的。

我将 BorderContainer 放置在 Attachpoint 上。作为最初的 postet，我正在以编程方式创建 BorderContainer，并且 domConstruct 调用进行放置。 this.interface 是我正在使用的附加点。小部件的 HTML 模板仅包含具有 data-dojo-attach-point 属性的 div。

好的。所以我建议您在自定义小部件的postCreate 方法中调用_buildUI() 方法，在自定义小部件中保存对您创建的BorderContainer 的引用，然后在自定义小部件中调用startup() 和resize()小部件startup 方法。不要忘记致电this.inherited(arguments)。