dojo splitter ne pas redimensionner correctement avec le contenu dynamique

Question

Je crée une page web dojo 1.8 apparemment simple qui contient un div de disposition d'application contenant un conteneur de tabulation et un panneau d'alarme sous le conteneur de tabulation. Ils sont séparés par un séparateur de sorte que l'utilisateur peut sélectionner la quantité d'alarmes ou le tabcontainer qu'ils veulent voir.

Voici l'exemple sur jsFiddle:

http://jsfiddle.net/bfW7u/

Aux fins de la démonstration, il y a une minuterie qui pousse la table dans le panneau d'alarme par une entrée toutes les 2 secondes.

Le problème (s):

1. Si l'on ne fait rien et laisse juste la table croître, aucune barre de défilement apparaît dans le panneau d'alarme.

2. Si vous déplacez le séparateur sans avoir d'abord redimensionné la fenêtre du navigateur, la poignée du séparateur finit dans un emplacement étrange.

3. Redimensionner la fenêtre du navigateur le fait se comporter comme je l'attendrais pour commencer.

Questions:

1. Ai-je fait quelque chose de mal dans la façon dont je suis la mise en choses et qui est à l'origine de ce problème?

2. Comment puis-je attraper le séparateur a été déplacé événement (nom?)

3. Comment redimensionner le volet séparateur à une hauteur arbitraire? J'ai essayé d'utiliser domStyle.set ("alarmPanel", "height", 300) et cela définit en effet la propriété height ... mais le panneau ne se redimensionne pas!

Toute aide grandement appréciée!

Answer 1

Je fourchue votre jsFiddle et a fait quelques modifications à ce: http://jsfiddle.net/phusick/f7qL6/

1. Débarrassez-vous de overflow: hidden dans html, body et la hauteur de alarmPanel définies de manière explicite:

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

2. Cette délicate. Vous avez deux options: pour écouter le du séparateur faites glisser et déposez ou pour écouter ContentPane.resize invocation de méthode. Les deux via 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. Appel méthode layout() après avoir changé la taille:

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