ContentJane上的DOJO ContentPane内部DIV高度更改调整大小

时间:2012-05-31 11:25:33

标签: layout dojo dijit.layout contentpane

我正在使用DOJO的ContentPane模块。我在其中一个窗格中有一个div元素,我需要给它一个高度 - 比ContentPane的高度小100个像素,这样div动态地改变它的高度您可以通过拖动分割符来更改ContentPane大小。我是Dojo的新手,如果有人可以帮助我,我会很高兴。

感谢。

1 个答案:

答案 0 :(得分:4)

我认为最佳解决方案是通过嵌套BorderContainers并正确设置splitters,因为这样dijit/layout将负责调整大小,您不需要编写任何JavaScript代码和您的布局将完全基于CSS。

解释起来有点麻烦,所以我在jsFiddle为你创建了一个工作示例:http://jsfiddle.net/phusick/Ayg8F/ +图表:

enter image description here

注意:不要忘记为height: 100%html和最高body设置BorderContainer

此解决方案的缺点是您必须将divs替换为ContentPanes。如果您不想或不想,可以使用dojo/aspect并连接到BorderContainerContentPane resize方法,并在尺寸适当时手动调整divs的大小变化:

require([
    "dojo/ready",
    "dojo/aspect",
    "dijit/registry",
    "dijit/layout/ContentPane",
    "dijit/layout/BorderContainer"
], function(
    ready,
    aspect,
    registry
) {

    ready(function() {
        var bc = registry.byId("borderContainer1");
        aspect.after(bc, "resize", function() {
            // calculate and set <div> size here
            console.log("resize divs");
        });
    });  
});​