Extjs 滑出面板

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 属性。那是行不通的，事实上它会因 "foo not a function" 异常而爆炸。

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

Extjs 滑出面板

Extjs SlideOut panel

javascript

extjs