2012-08-25 3 views
1

titlePane의 onClick 이벤트에서 dijit borderContainer의 크기를 조정하고 싶지만 resize 함수의 동작이 매우 이상합니다 (Resize()는 두 번째 클릭 이후에만 작동합니다). 이 코드는 내가 사용된다Resize borderContainer onClick titlePane

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

이미이 동작을 본 적이 있나요? 당신의 전문성은 매우 높이 평가 될 것입니다. 덕분에

답변

4

사실, 또한 resize() 작품을 처음 있지만 titlePane's 크기 조정 애니메이션 완료 (200 밀리 초 이상 기본적으로) 후에는 onClick가 발생하지 직후 resize()를 호출해야하기 때문에 일이 아무것도 볼 수는 없지만, 그렇지 않으면 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"); 
+0

신속한 답변을 위해 매우 감사드립니다. 나는 애니메이션을위한 시간을 완전히 잊어 버렸다. 당신의 예제는 완벽하게 작동한다. 희망은 많은 사람들을 도울 수 있습니다. 고마워요! – user1390837