Question

我正在尝试以编程方式在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

非常感谢任何帮助！

Answer 1

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

此外，您应该能够直接将AccordionContainer作为边框容器的“正确”部分，而不需要额外的内容窗格。只需将区域：'right'属性放在AccordionContainer上并将其添加到bordercontainer而不是contentpane，或者如果由于某种原因你的应用程序被编写为需要稍后交换内容，则替换contentpane。

HTH

在BorderContainer中以编程方式创建AccordionContainer，具有大小调整问题

1 个答案: