Discussion :

[jcrom]

Bonjour à vous,

J'aimerais "resizer" un dijit borderContainer sur l'événement onClick d'un titlePane afin de recalculé la taille de mes éléments contenu dans ce borderContainer.

Malheureusement le comportement de la fonction resize() est bizarre dans mon cas: lorsque je clique la première fois sur mon titlePane, rien ne se passe. Ensuite le resize fonctionne mais redimensionne le tout en décalé. Voici un exemple plus parlant:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
<div data-dojo-type="dijit.layout.BorderContainer" id="borderContainer">
<div data-dojo-type="dijit.TitlePane" region="top" id="titlePane" title="Title">
    <script type="dojo/method">
        dojo.connect(dijit.byId("titlePane"), "onClick", function(){dijit.byId("borderContainer").resize()});
    </script>
</div>
<div data-dojo-type="dijit.layout.TabContainer" region="center" id="tabContainer">
    <div data-dojo-type="dijit.layout.ContentPane" id="contentPane" title="content" selected="true">
        This is the content
    </div>  
</div>

Avez-vous déjà rencontré un problème similaire? Votre expertise me sera d'une grande aide. Merci

[jcrom]

J'ai eu une réponse. Pour ceux que ça intéresse je la place ici :

Actually, resize() works also the first time, but you cannot see anything happening because you should call resize() not immediately after onClick occurs, but after the titlePane's resize animation finishes (200 ms later by default), because otherwise borderContainer resizes to the same size.

This is what I suggest:

dijit.byId("titlePane").watch("open", function(param, oldValue, newValue) {
var animation = newValue ? this._wipeIn : this._wipeOut;
var handler = dojo.connect(animation, "onEnd", this, function() {
dijit.byId("borderContainer").resize();
dojo.disconnect(handler);
});
});

See a working example at jsFiddle: http://jsfiddle.net/phusick/E5CwV/

EDIT: On second thought, you can also create permanent connections on those two animations, but in my opinion it will lead to less readable code:

var titlePane = dijit.byId("titlePane");
var borderContainer = dijit.byId("borderContainer");
dojo.connect(titlePane._wipeIn, "onEnd", borderContainer, "resize");
dojo.connect(titlePane._wipeOut, "onEnd", borderContainer, "resize");