Latest Ext JS 7.8 is now available. Learn more

How to Animate your Ext JS Components

October 16, 2018 246 Views
Show

Sometimes we need to add animations to our application to make it more friendly or give it a more sophisticated look depending on how the animation is presented (e.g. components that slide off of the screen instead of simply disappearing and having the rest of the document abruptly shifting to the side).

Here I’ll show you how to use the show and beforeclose events of the Window component to demonstrate a fade-in / fade-out animation effect.

Code Snippet

Ext.create(‘Ext.Window’, {
title: “Window”,
width: 400,
height: 300,
html: “

Hello

“,
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();

Understanding the code

On Window show, we grab the component’s element using win.getEl() because Element (Ext.dom.Element) is the Class that contains all the animation methods, where you can call element.animate(config) and this config property must be a valid configuration for Ext.fx.Anim.
Ext JS provides some preset configurations such as: fadeIn, fadeOut, frame, ghost, slideIn, slideOut, etc.

On beforeclose we return false initially, preventing the Window from closing (because shouldClose is false), then we run our animation and add a callback that runs when the animation is over to set shouldClose to true, and then close the Window successfully.
This works because returning false inside a beforeclose listener prevents it from closing, and returning true allows it.

Note: You could use the same concept to display a confirmation message (Ext.Msg.confirm) to verify if the user really wants to close the Window, for example.

End Result

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2mgu

We hope you find this tip helpful!

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More