Extjs SlideOut面板

Question

我试图滑出一个面板然后使用extjs隐藏它。滑出工作正常，但是一旦我添加了隐藏功能，它就会停止工作。我该如何解决。 我的功能如下。

toggleSidebar : function () {
    var sidebar = this.getSidebar();
    if(sidebar.hidden){
        sidebar['show'](); 
    }else{
        sidebar.el.slideOut('l', {
            easing: 'easeOut',
            duration: 200,
            scope: this,
            callback: this.onSidebarAnim()
        });
        sidebar['hide'](); // Slide works if I remove this line. 
    }


},

Answer 1

动画是一个异步过程，slideOut在动画结束前不会阻塞;事实上，您的代码开始为面板设置动画，然后立即隐藏它。这就是为什么它没有像你期望的那样工作。

解决方案是在动画完成后隐藏面板。这就是回调的用途，除了在原始代码中而不是在callback属性中传递函数之外，您将调用它并将其执行结果分配给callback属性。这不会起作用，事实上它会爆炸，而不是一个功能＆＃34;异常。

toggleSidebar: function () {
    var sidebar = this.getSidebar();

    if (sidebar.hidden) {
        sidebar.show(); 
    }
    else {
        sidebar.el.slideOut('l', {
            easing: 'easeOut',
            duration: 200,
            scope: this,
            // Pass the function itself, note no parentheses:
            callback: this.onSidebarAnim
        });
    }
},

onSidebarAnim: function() {
    this.getSidebar().hide();
    ...
}