Março 15, 2019 2 Minutos p/ ler

Como animar seus componentes ExtJS

Deixe seu aplicativo mais amigável através de animações

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

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