Resize borderContainer onClick titlePane

Question

I would like to resize a dijit borderContainer on the onClick event of a titlePane but the resize function behavior is very strange (Resize() works only after the second click). This is the code I use :

<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>

Have you already seen this behavior? Your expertise would be very appreciated. Thanks

Answer 1

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");