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

我试图通过编程在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();

//创建外部div
var node=dojo.byId（'columnLayoutDiv'）；
var bc=new dijit.layout.BorderContainer（{id:'brdr'，设计：'sidebar'，样式：'border:0px；height:400px；'}）；
appendChild（bc.domNode）；
var widget1=new dijit.layout.ContentPane（{id:“中心”，region:“中心”，style:“padding:0px；”}）；
widget1.attr（'content'，'Left Pane'）
bc.addChild（widget1）；
var widget2=new dijit.layout.ContentPane（{id:“right”，region:“right”，style:“padding:0px；”}）；
attr（'content'，'Right Pane'）；
bc.addChild（widget2）；
bc.startup（）；
布局（）；
//创建手风琴并将其添加到容器中
var resourcesAccordion=new dijit.layout.AccordionContainer（{id:'accordionCtr'}）；
bc.getChildren（）[0].attr（'content'，resourcesAccordion）；
resourcesAccordion.startup（）；
//创建手风琴窗格并添加它们
var linksPane=new dijit.layout.ContentPane({
标题：“手风琴1”，
样式：“填充：0px；边距：0px；”，
内容：“你好！
你好！
你好！
你好！
你好！
”
});
var experiencePane=new dijit.layout.ContentPane({
标题：“手风琴2”，
样式：“填充：0px；边距：0px；”，
内容：“世界
世界
世界
世界
世界
世界
世界

});
resourcesAccordion.addChild（linksPane）；
资源合作伙伴：addChild（experiencePane）；
resourcesAccordion.layout（）；
布局（）；

您可以看到我在此处创建的示例页面：

---

任何帮助都将不胜感激

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

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

---

HTH

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

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

---

HTH

您也可以尝试在现有代码的末尾调用bc.resize（），而不是layout（），看看会发生什么谢谢！。。。将accordioncontainer直接放在bordercontainer中似乎可以解决问题。虽然从纯学术的角度来看。。您知道为什么将AccordionContainer放在ContentPane中不起作用吗？（如果我们以声明的方式这样做的话，效果会很好）太好了。别忘了将此标记为已回答。我希望，如果您将所有必需的维度都放在额外的contentpane上，bordercontainer仍能正确布局。这可能是因为，即使没有度量，它也会在某些情况下工作，具体取决于您添加或启动小部件的顺序，并且编程模型将与声明性模型不同。您还可以尝试在现有代码末尾调用bc.resize（），而不是layout（），看看会发生什么谢谢！。。。将accordioncontainer直接放在bordercontainer中似乎可以解决问题。虽然从纯学术的角度来看。。您知道为什么将AccordionContainer放在ContentPane中不起作用吗？（如果我们以声明的方式这样做的话，效果会很好）太好了。别忘了将此标记为已回答。我希望，如果您将所有必需的维度都放在额外的contentpane上，bordercontainer仍能正确布局。即使没有度量，它也可能在某些情况下工作，这取决于您添加或启动小部件的顺序，并且编程模型将不同于声明模型。