Como animar seus componentes ExtJS Como animar seus componentes ExtJS | Blog BSource
Como animar seus componentes ExtJS
Deixe seu aplicativo mais amigável através de animações
Março 15, 2019 2 Minutos p/ ler
No post de hoje irei demonstrar um exemplo de animação para nosso aplicativo, para torná-lo mais amigável ou dar uma aparência mais sofisticada dependendo de como a animação é apresentada.
Aqui eu mostrarei como usar os eventos show e beforeclose do componente Window para demonstrar um efeito de animação fade-in/fade-out
title: "Window",
html: "<div id='example'>Hello</div> ",
show: function (win) {
el.setOpacity(0);
el.fadeIn({
beforeclose: function (win) {
if (!win.shouldClose) {
win.getEl().fadeOut({
win.shouldClose = true;
return win.shouldClose ? true : false;
No Window show, pegamos o elemento do componente usando win.getEI() porque Element(Ext.dom.Element)é a classe que contém todos os métodos de animação, onde você pode chamar element.animate(config) e esta propiedade config deve ser uma configuração válida para Ext.fx.Anim.
O ExtJS fornece algumas configurações predefinidas, como: fadeIn, fadeOut, frame, ghost, slideIn, slideOut,etc.
No beforeclose retornamos false inicialmente, impedindo que a janela feche (porque shouldClose é false), então executamos nossa animação e adicionamos um retorno de chamada que é executado quando a animação termina para definir shouldClose como true e depois fechar a janela com êxito. Isso funciona porque retornar false dentro de um beforeclose listener impede que ele feche, e retornando true permite que ele feche.
Nota: Você poderia usar o mesmo conceito para exibir uma mensagem de confirmação (Ext.Msg.confirm) para verificar se o usuário realmente deseja fechar a janela, por exemplo.