Question

我想在titlePane的onClick事件上调整dijit borderContainer的大小，但调整大小函数的行为非常奇怪（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");

调整borderContainer onClick titlePane的大小

1 个答案: