相对于外部容器节点的大小，如何设置 Dojo TitlePane 的高度？

Posted 2023-02-16

【中文标题】相对于外部容器节点的大小，如何设置 Dojo TitlePane 的高度？

【英文标题】：How could i set the height of a Dojo TitlePane, relative to the size of the outer container node?

【发布时间】：2012-12-25 05:01:31

【问题描述】：

在下一个示例中，我在 200 像素高度的容器之间创建了一个 TitlePane。我将 TitlePane 高度设置为 100%，但它似乎没有扩展。

相关代码：

var titlePane = new TitlePane(
    title: "TITLE",
    toggleable: false,
    style: "height: 100%; overflow-y: auto",
    content: "foo"
);
var outerPane = new ContentPane(
    content: titlePane,
    style: "height: 200px;"
, dojo.byId("body2"));

完整示例：

http://jsfiddle.net/bzFPM/

有什么想法吗？

【参考方案1】：

添加此样式

.dijitTitlePaneContentOuter 

    height:80%;   

我不确定这是否是最佳选择。但这也是有效的。

http://jsfiddle.net/bzFPM/4/

【参考方案2】：

我找到了使用手风琴容器的解决方法。当只包含一个带有标题的窗格时，它看起来几乎相同。

function example(ContentPane, Accordion, Button)

var titlePane = new Accordion(
       style: "height: 100%; overflow-y: auto"
     );

var innerPane = new ContentPane(title:'TITLE', content:'foo')

titlePane.addChild(innerPane);

var outerPane= new ContentPane(
    content:titlePane,
    style: "height: 200px;"
, dojo.byId("body2"));

outerPane.startup()
var button= new Button(
    label:"add line",
    onClick:function(ev)
        innerPane.set("content", innerPane.get("content")+"<br>foo")
        
).placeAt(dojo.byId("body2"), "after");


require(["dijit/layout/ContentPane", "dijit/layout/AccordionContainer",
     "dijit/form/Button"], example );

http://jsfiddle.net/bzFPM/5/