javascript - 有尺寸问题的BorderContainer中以编程方式创建的AccordionContainer

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

这是有问题的代码：

// 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

任何帮助将不胜感激！

最佳答案

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

另外，您应该能够将AccordionContainer直接放入边框容器的“右侧”，而无需额外的内容窗格。只需在AccordionContainer上放置region：'right'属性，然后将其添加到bordercontainer而不是contentpane，或者如果由于某种原因而编写了您的应用程序以便稍后需要交换内容，则替换contentpane。

高温超导