Question

我在borderContainer中有一个titlePane，我试图让titlePane中有一个滚动条。当您拖动拆分器以使titlePane更小时滚动条显示，但滚动条从底部掉落（看起来它偏移与titlePane标头相同的高度）。有没有办法让整个滚动条在视图中？

<body class="claro">
<div id="container" data-dojo-type="dijit.layout.BorderContainer" >
    <div id="center" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center', layoutPriority: 1">
            center
        </div>
        <div id="bottom" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'bottom', splitter: 'true'">
             <div class="titlePane" data-dojo-type="dijit.TitlePane" data-dojo-props="title: 'tilepane'">
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
                 <p>content</p>
            </div>
    </div> 
 </div>    
</body>

这是css

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}

#container {
    width: 100%;
    height: 100%;
}
#bottom {
     padding: 0;
     height: 100px;
}    
.claro .dijitTitlePaneContentOuter {
    height:100%;
    overflow:auto;
}

以下是一个工作示例http://jsfiddle.net/mMTdU/1/

Answer 1

我能够解决这个问题，所以希望如果有其他人遇到类似的问题会有所帮助。您可以轻松扩展该类并覆盖由borderContainer调用的resize函数。

dojo.addOnLoad(init);

function init() {
    dojo.safeMixin(dijit.byId("titlePane"), {
        resize: function() {
            this.inherited(arguments);

            this.hideNode.style.height = (dojo.marginBox(this.domNode).h - dojo.marginBox(this.titleBarNode).h).toString() + "px";
        }
    });

    // set initial height
    var titlePane = dijit.byId("titlePane");
    titlePane.hideNode.style.height = (dojo.marginBox(titlePane.domNode).h - dojo.marginBox(titlePane.titleBarNode).h).toString() + "px";
}

我们需要在titlePane中计算和设置内容div的高度，而不是仅仅给它100％的高度。您可以在更新的jsfiddle链接http://jsfiddle.net/mMTdU/2/

中看到它正常工作

BorderContainer中titlePane上的Dojo滚动条

1 个答案: