TabContainer 仅在 windowresize 时显示选项卡

Posted

技术标签:

【中文标题】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 模板中定义 BorderContainerTabContainer 获得了最佳结果。不幸的是,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)

以上是关于TabContainer 仅在 windowresize 时显示选项卡的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 dijit.layout.TabContainer 指定选定的选项卡?

带有 dojo、dgrid、TabContainer 和 JsonRest 的 DOMException

TabContainer 中的 EnhancedGrid 不起作用

Ajax 工具包 TabContainer

Dojo dijit.layout.TabContainer - 如何将类添加到选项卡?

text TabContainer - 选项卡之间的转换