The user is the most important part of our applications and we must ensure a good impression. Ext JS has different visual effects that allow us get the user's attention to inform the system status, in this chapter we will talk about the effects that are available. The class Ext.Fx is the one who's responsible to add effects to the object Element, we can use the methods of the class Fx through the instances of the object Element.

Packaging the tutorial

Before we start the tutorial we need to package the code, we already know what are the advantages of doing it.

Ext.namespace('com.quizzpot.tutorial');

com.quizzpot.tutorial.Fx = {
	init: function(){
		//The code of this tutorial goes here
	}
}
//Executing the function "init" when the DOM is ready to be used
Ext.onReady(com.quizzpot.tutorial.Fx.init,com.quizzpot.tutorial.Fx);

Fading

The first visual effect we will talk about is called "fade" and there are two different types, fadeIn and fadeOut, this visual effect disappears or displays an element slowly. For this tutorial we are going to create a button for every visual effect and when we click on that button we will execute the visual effect on the element, so go ahead and download the resources for this tutorial.

//Getting the element
var el = Ext.get('element');
el.center(); //we center the element on the screen

//when we click on the button with the id fadeInFx
Ext.get('fadeInFx').on('click',function(){
	el.setOpacity(0); //we will give 0 opacity to the element
	el.fadeIn(); //so it will be displayed slowly
});
//when we click on the button fadeOutFx
Ext.get('fadeOutFx').on('click',function(){
	el.fadeOut(); //the element will disappear slowly
});

You can use this visual effect when you remove or add a row in a table or panel, this will catch the user's attention by informing that something's happening.

Frame

The visual effect "frame" generates an outline around the element that will increase and disappear at the same time.

Ext.get('frameFx').on('click',function(){
	el.frame();
});

This visual effect can be used to catch the user's attention to a certain part of the screen; we can change the color that has by default to another color like red or yellow to indicates a warning or error, also we can specify the number of times we want to repeat the visual effect, for this example we will repeat the effect 3 times.

Ext.get('frameFx').on('click',function(){
	el.frame('ff0000',3);
});

Ghost

Normally this visual effect is used to remove elements from the screen, as it makes the element disappear slowly and slide it to the chosen direction, by default the direction is down.

Ext.get('ghostFx').on('click',function(){
	el.ghost();
});

Highlight

This visual effect is used to show messages to the users, in this way the user's attention is taken to the message you want to show, by default the element is highlighted in yellow, but you can change the color.

Ext.get('highlightFx').on('click',function(){
	el.highlight('00ff77'); // changing the color
	Ext.fly('msg').highlight(); //the element will be highlighted in yellow
});

Puff

This visual effect disappears an element by making it "explode" and fade slowly.

Ext.get('puffFx').on('click',function(){
	el.puff();
});

It's very useful when you want to delete an element for example in a shopping cart or in a gallery when you want to delete an image.

Scale

We can resize an element with this visual effect by making a transition of the current measurements to new ones.

Ext.get('scaleFx').on('click',function(){
	el.scale(50,50);
});
Ext.get('scale2Fx').on('click',function(){
	el.scale(100,100);
});

The first parameter of this method is the "width" of the element and the second parameter is the "height" of the element.

Slide

There are two different types of "slide", "slideIn" and "slideOut", these effects allow us to display and disappear elements from the screen in a striking manner, it can be an alternative for some of the previous effects.

Ext.get('slideInFx').on('click',function(){
	el.slideIn(); //displaying the element
});
Ext.get('slideOutFx').on('click',function(){
	el.slideOut(); //the element disappears
});

This visual effect can be used to create a cool menu, gallery, image transition, etc. the only limit is your imagination.

Shift

This visual effect can change the position, dimension and/or opacity at the same time, it's perfect if you want to change different properties at the same time.

Ext.get('shiftFx').on('click',function(){
	el.shift({
		x: 100,
		y: 200,
		width: 200,
		height: 200
	});
});

It's important to remember that you need to specify the property you want to change because if you don't, the method will be executed without arguments and you won't see any visual effect.

Positions

Most of the visual effects mentioned support the following directions in the effects: tl: The top left corner t: The center of the top edge tr: The top right corner l: The center of the left edge r: The center of the right edge bl: The bottom left corner b: The center of the bottom edge br: The bottom right corner

Easing

To apply acceleration or deceleration on the effects we can specify some kind of "easing" of the following list: easeNone easeIn easeOut easeBoth easeInStrong easeOutStrong easeBothStrong elasticIn elasticOut elasticBoth backIn backOut backBoth bounceIn bounceOut bounceBoth

Ext.get('scale3Fx').on('click',function(){
	el.scale(200,200,{
		easing:'elasticOut',duration:2
	});
});

By using this visual effect we make the striking animations, giving the user a better experience when using our applications.

Conclusions

The visual effects are a very important because it improves the user's experience, some developers can think that is a waste of time, but the reality is that the small details make a big difference between success and failure.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Learning Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!