1

我想在 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>

你已经看到这种行为了吗？您的专业知识将不胜感激。谢谢

4

1 回答 1

4

实际上，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");
于 2012-08-25T13:40:09.950 回答