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 模板中定义 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)
。以上是关于TabContainer 仅在 windowresize 时显示选项卡的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 dijit.layout.TabContainer 指定选定的选项卡?
带有 dojo、dgrid、TabContainer 和 JsonRest 的 DOMException
TabContainer 中的 EnhancedGrid 不起作用