EnglishPortuguese

Como animar seus componentes ExtJS

Home / Blog / Como animar seus componentes ExtJS
Data:
15/03/2019
Categoria:
Tutorial
Como animar seus componentes ExtJS

Olá Pessoal, tudo certo?

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

Fragmento de código

Ext.create('Ext.Window', {
  title: "Window",
  width: 400,
  height: 300,
  html: "<div id='example'>Hello</div> ",
  listeners: {
    show: function (win) {
       var el = win.getEl();
 
       el.setOpacity(0);
       el.fadeIn({
           duration: 2000
       });
    },
    beforeclose: function (win) {
        if (!win.shouldClose) {
            win.getEl().fadeOut({
               duration: 2000, 
               callback: function () {
                    win.shouldClose = true;
                    win.close();
                }
            });
        }
        return win.shouldClose ? true : false;
    }
}}).show();

Entendendo o código

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.

Resultado Final

upload

Espero que você ache essa dica útil, tenha um bom dia e até a próxima.