dojo - 動的コンテンツでdojoスプリッターのサイズが適切に変更されない

Question

タブコンテナとタブコンテナの下のアラームパネルを含むアプリレイアウトdivを含む一見シンプルなdojo1.8Webページを作成しています。それらはスプリッターによって分離されているため、ユーザーは表示するアラームまたはタブコンテナーの量を選択できます。

jsfiddleの例は次のとおりです。

http://jsfiddle.net/bfW7u/

デモの目的で、2秒ごとにエントリごとにアラームパネルのテーブルを大きくするタイマーがあります。

問題点）：

1. 何もせずにテーブルを大きくするだけの場合、アラームパネルにスクロールバーは表示されません。

2. 最初にブラウザウィンドウのサイズを変更せずにスプリッタを移動すると、スプリッタハンドルが奇妙な場所に配置されてしまいます。

3. ブラウザウィンドウのサイズを変更すると、最初から期待したとおりに動作します。

質問：

1. 設定方法に問題があり、それがこの問題の原因になっていますか？

2. スプリッターが移動されたイベント（名前）をキャッチするにはどうすればよいですか？

3. スプリッターペインのサイズを任意の高さに変更するにはどうすればよいですか？domStyle.set（ "alarmPanel"、 "height"、300）を使用してみましたが、これにより実際に高さプロパティが設定されます...しかし、ペインのサイズは変更されません。

どんな助けでも大歓迎です！

Answer 1

私はあなたの jsFiddle をフォークし、それにいくつかの変更を加えました: http://jsfiddle.net/phusick/f7qL6/

1. overflow: hiddeninを取り除き、 のhtml, body高さを明示的に設定しalarmPanelます:

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

2. このトリッキーなもの。スプリッターのドラッグ アンド ドロップをリッスンするか、ContentPane.resizeメソッドの呼び出しをリッスンするかの 2 つのオプションがあります。両方経由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();