Resize borderContainer onClick titlePane

Question

我想重新調整一個關於titlePane的onClick事件的dijit borderContainer，但resize函數的行爲非常奇怪（Resize（）僅在第二次點擊後才起作用）。這是我的代碼使用方法：

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

你是否已經看到這種行爲？您的專業知識將非常感激。由於

Answer 1

其實，resize()作品也是第一次，但你看不到任何東西發生，因爲你應該叫resize()onClick發生後不立即，但titlePane's調整大小的動畫完成（200毫秒後默認情況下）之後，否則borderContainer調整大小到相同的大小。

這是我的建議：

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

看到的jsfiddle工作示例：http://jsfiddle.net/phusick/E5CwV/

編輯：關於第二個想法，你也可以創建這兩個動畫永久連接，但在我認爲這會導致可讀性較差的代碼：

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