javascript - 以编程方式在 BorderContainer 中创建的 AccordionContainer 存在大小问题

Question

我正在尝试以编程方式在 BorderContainer 内创建 AccordionContainer。我能够显示 Accordion 容器，但是，它似乎错误地计算了它的初始大小。当屏幕绘制时，第二个折叠面板位于屏幕底部。如果您调整屏幕大小，或按页面上的“调整大小”按钮，一切都会自行修复。这是最奇怪的事情。

这是有问题的代码:

// Create outer div
var node = dojo.byId('columnLayoutDiv');

var bc = new dijit.layout.BorderContainer({id:'brdr' ,design:'sidebar', style:'border: 0px; height: 400px;' });

node.appendChild(bc.domNode);

var widget1 = new dijit.layout.ContentPane({id: "center", region: "center", style:"padding: 0px;"});
widget1.attr('content', 'Left Pane')
bc.addChild(widget1);

var widget2 = new dijit.layout.ContentPane({id: "right", region: "right", style:"padding: 0px;"});
widget2.attr('content', 'Right Pane');
bc.addChild(widget2);

bc.startup();
bc.layout();


// Create the accordion and add it to the container
var resourcesAccordion = new dijit.layout.AccordionContainer({id:'accordionCtr'});


bc.getChildren()[0].attr('content', resourcesAccordion);
resourcesAccordion.startup();

// Create Accordion Panes and add them
var linksPane = new dijit.layout.ContentPane({
title: "Accordion 1",
style: "padding:0px; margin:0px;",
content: "Hello there!<br/>Hello there!<br/>Hello there!<br/>Hello there!<br/>"
});

var experiencePane = new dijit.layout.ContentPane({
title: "Accordion 2",
style: "padding:0px; margin:0px;",
content: "World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>World<br/>"
});

resourcesAccordion.addChild(linksPane);
resourcesAccordion.addChild(experiencePane);
resourcesAccordion.layout();
bc.layout();

您可以在此处查看我创建的示例页面:http://www.quimbik.com/sample/accordion.html

任何帮助将不胜感激!

Answer 1

首先，指定 BorderContainer 的工作方式，您应该在边框容器上声明高度和宽度，然后在所有左/右区域上声明宽度(仅)，在顶部和顶部声明高度(仅)底部区域。中心不应指定任何尺寸，这在上面的示例中是正确的。您的右侧区域在其样式声明中没有宽度，因此这种情况下的行为未指定。尝试在“brdr”上输入总宽度，在“右侧”区域上输入宽度。

此外，您应该能够将 AccordionContainer 直接放入边框容器的“右侧”部分，而无需额外的内容 Pane 。只需将 Region:'right' 属性放在 AccordionContainer 上，并将其添加到 bordercontainer 而不是 contentpane，或者如果由于某种原因您的应用程序编写为稍后需要交换内容，则替换 contentpane。

HTH