Панель 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. Это не сработает, и на самом деле это взорвется исключением «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(); 
    ... 
}