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

Question

我正在创建一个看似简单的 dojo 1.8 网页，其中包含一个应用布局 div，其中包含一个选项卡容器和一个位于选项卡容器下方的警报面板。它们由拆分器分隔，因此用户可以选择他们想要查看多少警报或选项卡容器。

这是 jsfiddle 上的示例：

http://jsfiddle.net/bfW7u/

出于演示的目的，有一个计时器，它每 2 秒将警报面板中的表格增加一个条目。

问题：

1. 如果什么都不做，只是让表格变大，则警报面板中不会出现滚动条。

2. 如果在没有先调整浏览器窗口大小的情况下移动拆分器，拆分器句柄最终会出现在一个奇怪的位置。

3. 调整浏览器窗口的大小使其表现得像我期望的那样。

问题：

1. 我在设置的方式上做错了什么并导致了这个问题吗？

2. 如何捕获拆分器已移动事件（名称？）

3. 如何将拆分器窗格调整为任意高度？我试过使用 domStyle.set("alarmPanel", "height", 300) 并且这确实设置了 height 属性......但是窗格没有调整大小！

非常感谢任何帮助！

Answer 1

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

1. 去掉html, body中的overflow: hidden，明确设置alarmPanel的高度：

   .claro .demoLayout .edgePanel {
       height: 150px;
   }
   

2. 这很棘手。您有两种选择：收听拆分器的拖放或收听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);
   });    
   

3. 改变大小后调用layout()方法：

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