Question

我正在创建一个看似简单的dojo 1.8网页，其中包含一个应用程序布局div，其中包含选项卡容器和选项卡容器下方的警报面板。它们由分离器分隔，因此用户可以选择要查看的警报或标签容器的数量。

这是关于jsfiddle的例子：

http://jsfiddle.net/bfW7u/

为了演示的目的，有一个计时器，它每2秒通过一个条目在报警面板中增加表格。

问题：

如果一个人什么也不做，只是让桌子长大，警报面板上就不会出现滚动条。
如果在没有先调整浏览器窗口大小的情况下移动分割器，则分割器手柄最终位于一个奇怪的位置。
调整浏览器窗口的大小使其行为与我预期的一样。

问题：

我在设置方式上做错了什么导致了这个问题？
如何捕捉拆分器已被移动的事件（名称？）
如何将分割窗格调整为任意高度？我尝试过使用domStyle.set（“alarmPanel”，“height”，300），这确实设置了高度属性......但是窗格没有调整大小！

任何帮助都非常感谢！

Answer 1

我分叉你的jsFiddle并对它进行了一些修改：http://jsfiddle.net/phusick/f7qL6/

摆脱overflow: hidden中的html, body并明确设置alarmPanel的高度：
```
.claro .demoLayout .edgePanel {
    height: 150px;
}
```

这个棘手的问题。您有两种选择：收听拆分器的拖放或监听ContentPane.resize方法调用。两者都来自dojo/aspect：

// Drag and Drop
var splitter = registry.byId("appLayout").getSplitter("bottom");
var moveHandle = null;

aspect.after(splitter, "_startDrag", function() {
    moveHandle = aspect.after(splitter.domNode, "onmousemove", function() {
        var coords = {
            x: !splitter.horizontal ? splitter.domNode.style.left : 0,
            y: splitter.horizontal ? splitter.domNode.style.top : 0
        }
        dom.byId("dndOutput").textContent = JSON.stringify(coords);
    })
});  

aspect.after(splitter, "_stopDrag", function() {
    moveHandle && moveHandle.remove();
});


// ContentPane.resize()   
aspect.after(registry.byId("alarmPanel"), "resize", function(duno, size) {
    dom.byId("resizeOutput").textContent = JSON.stringify(size);
});

更改尺寸后调用layout()方法：

registry.byId("alarmPanel").domNode.style.height = "200px";                
registry.byId("appLayout").layout();

dojo拆分器没有使用动态内容正确调整大小

1 个答案: