The term "fading" is used in Ext.Fx to refer to a change in opacity—from 100% opaque to 0%(fade out) and vice versa(fade in). In other words, we're making something disappear and reappear—but as this is the Effects chapter, the transition is animated. The two methods that perform these transitions are Ext.Fx.fadeOut and Ext.Fx.fadeIn, and both support simple zero-argument usage:

Ext.get('target').fadeOut();
window.setTimeout(function() {
Ext.get('target').fadeIn();
}, 3000);

This usage will cause the target element to fade away slowly until it is completely invisible. The timeout happens three seconds later and causes the target to slowly re-appear, or fade in, until it is fully visible again.

You can tweak the behavior of these methods using the endOpacity configuration option. In theory, this allows you to specify that the element will not fade out to complete invisibility, which can be useful if you simply want to indicate that an item is now less important. Alternatively, you can use it to dictate that an item will not return to total solidity:

Ext.get('target').fadeOut({endOpacity:0.25});
window.setTimeout(function() {
Ext.get('target').fadeIn({endOpacity: 0.75});
}, 3000);

Note that I say "in theory"; actually, a limitation in Ext JS 2.2 means that the item in question will actually just vanish after reaching the endOpacity. I'd expect this to be fixed in the next release of the framework.

In the example just given, the initially-solid item is supposed to fade out to one quarter opacity before being restored after three seconds to only three quarters opacity.

In addition to the configuration options such as endOpacity that are specific to individual effects methods, there are also a number of common options shared by all Ext.Fx methods. These allow you to tweak the behavior of your effects even further. We'll discuss these later in this chapter.

Framing is reminiscent of a video game radar "ping". It radiates out from the point of origin, fading away with distance. A great use of this feature is to highlight a particular element on the screen—and the Ext.Fx.frame method also allows us to ensure that the user's attention is drawn by using multiple "pings". The simplest way of using it is without arguments:

Ext.get('target').frame();

This causes the target element to radiate a single light blue ping to draw attention to the element, which may be useful in some scenarios. However, to make sure that the user knows about a more important event, we could use something like this:

Ext.get('target').frame('ff0000', 3);

The first argument is the hexadecimal color of the framing effect, in this case, an angry red. The second argument specifies the number of times the ping is to be repeated. So here, we're using three red pulses to indicate that something pretty bad is about to happen.

These are the real strengths of the frame method: repetition, and the ability to use different colors to represent different situations and priorities.

Ghosts!-or rather ghosting—this is the term Ext JS gives to fading an element while it moves in a specified direction. This effect is used to give the impression that an element is transitioning from one area to another, for example the act of paging through a number of images could trigger ghosting when the next or previous link is selected. The default usage of ghost causes the element to drop down while fading out.

Ext.get('target').ghost();

The default settings could be used to discard elements that are no longer needed—perhaps deletion events could be signified with a call to Ext.Fx.ghost. As mentioned previously, we can also cater for other situations by specifying different direction for the ghosting depending on the situation. The standard Ext.Fx anchor points, used in animation and alignment, can also be used with the ghost method:

Ext.get('target').ghost('tr'),

Here, we indicate that the target will ghost out in the direction of its upper-right corner, but any anchor point is accepted. We'll talk more about anchoring later in the chapter. But it is this parameter that would allow us to replicate the paging functionality which was described earlier, that is, we can use left and right anchor points to move the ghost in the relevant directions.

If you're familiar with the term "Web 2.0", then you may also have heard of the "yellow fade technique". A quick web search will turn up numerous references to this JavaScript feature, which became popular when Web 2.0 was first becoming a buzzword. Typically used when an action has been completed and the user has been redirected to a new page, this effect causes a portion of the page—often an error message—to have its background highlighted in a different color. The highlight slowly fades away over a few seconds. Traditionally, the highlighted color has been a friendly yellow, but for error messages, we might favor something stronger. Having said that, yellow is the default for Ext.Fx.highlight:

This is triggered by the following basic code:

Ext.get('target').highlight();

Ext JS takes highlighting to the next level. While the standard usage affects the CSS background color of the target element, you can choose any CSS property, such as the color or border color. You can also specify the endColor of the highlight. In our second and more complex example, we can cause the text itself to start out white and end up green:

Ext.get('target').highlight('ffffff',{
attr: 'color',
endColor: '00ff00'
});

This is an extremely flexible method that can be used to highlight large portions of a page—perhaps a fieldset in a form, or just a block of text—perhaps in an online spellchecker. The point to be noted is that we can use it to respond and react to user input, and use its flexibility to indicate the state of our system in a noticeable manner.

Ext.Fx's puff method tries to replicate the look of a puff of smoke slowly dissipating into the air. While some of the Ext.Fx effects are used to highlight areas, puff is used to transition an element off the screen. To do this, the element expands while becoming more transparent, eventually fading away completely. Puff doesn't have any special options of its own, so the default usage is pretty obvious:

Ext.get('target').puff();

Puff could be used with a quick transition to dismiss a window from the workspace, or a slower transition could illustrate the removal of an element, maybe an image from a gallery. However, there is one important point to note about this method: when used within the document flow, it will affect the position of the elements around it.

Although absolutely-positioned windows will not affect their surroundings, in our gallery example, it is possible that when you use puff, you'll get unexpected results as the expanding dimensions push your other images out of the way.

Developers who are aware of the potential side effects of using Ext.Fx.puff can add it to their toolkit, providing another interesting method of creating dynamic transitions in their applications.

Scaling is one of the few Ext JS effects that has a specific use, rather than simply being an overlay on top of another action. It changes the dimensions of an element using a smooth transition, which has numerous applications. We can expand text areas to give more space for user input; we can replicate maximize and restore effects seen in the windowing applications; we can change the focus of a workspace by shrinking one portion and expanding another. The basic usage of Ext.Fx.scale looks like this:

Ext.get('target').scale(50, 150);

In this example, the target element will be smoothly-scaled to a width of 50 pixels and a height of 150 pixels. Both of these options also accept null values, which indicate that they should not be changed. This is useful if you want to restrict the scale to only horizontally or vertically.

Within Ext JS, sliding refers to the transition of an element into or out of view. This is the same effect used in the Ext.Fx.ghost method, so we've seen it in action already. But in reality, there are two methods that fall under this heading—:Ext.Fx.slideIn and Ext.Fx.slideOut.

We can use these methods to either drop out an element that is no longer required, or introduce a new element onto the screen. An obvious application for this would be addition and deletion of records, where new items slideIn to the list and deleted items slideOut.

Ext.get('target').slideOut();
window.setTimeout(function() {
Ext.get('target').slideIn();
}, 3000);

In the above example, we move the target out of view, and three seconds later bring it back in. By default, elements will slideIn and slideOut from their top edge, but the first argument to both functions allows you to use anchors to specify the direction of the movement:

Ext.get('target').slideOut('tr'),

Here, we dictate that the target will slideOut to the top right. As with Ext.Fx.puff, you must be aware of the elements that surround the item you're sliding; text and other non-absolutely-positioned elements may be pushed around during the slide.

The switchOff method is another means of removing an element from the screen. This one combines two actions: firstly a the element fades slightly to acknowledge the start of the effect, and then the element slowly collapses from the top and the bottom until it disappears. This two-stage effect means it can be used to draw the user's eye before the real vanishing act takes place. We can use Ext.Fx.switchOff in the following way:

Ext.get('target').switchOff();

As you can see, there are no unique arguments for this method, so it would seem that you're stuck with the default effect. But later we'll discuss the configuration options that are available for all of the Ext.Fx methods—the secret to complete control over your effects.

SwitchOff comes in pretty handy in situations where you'd like to cause an element to vanish without user interaction. For example, you might have some kind of monitoring screen on your website that displays the current visitors to your site, and tracks them as they move between pages. When their session expires, they will be removed from the list. Rather than simply transitioning off the screen you can highlight to the user that this is about to happen using switchOff: a quick flash to indicate that the action is about to occur, and then the actual collapse transition.

The Ext.Fx.shift method may sound like a function in the same vein as ghost and slideOut, but in actual fact it's a little different. There's no default behavior associated with the method, so simply call it in this fashion:

Ext.get('target').shift();

This will have no effect. Instead, shift must be supplied with a literal containing one or more values from the following:

By setting one of these values and passing it to shift, we can cause the target element to move to the x,y coordinates and resize to the width, height dimensions—in the smooth manner which we've come to expect of Ext.Fx. Here's an example:

Ext.get('target').shift({
x: 5,
y: 300,
width: 300,
height: 200
});

In this example, our target element will move to a position of 5 pixels from the left and 300 from the top of the viewport, and will resize to 300x200 pixels. These changes happen simultaneously, with the element resizing as it moves.

Effectively, shift is a version of Ext.Fx.scale that adds the ability to reposition the element. This is a great mechanism for re-organizing a workspace—shifting panels of data from a place of prominence to a place more unobtrusive, and doing so in a smooth, dynamic manner.

Our next configuration option is easing. In animation terminology, easing refers to the means by which the transition eases from a stop to movement and back to a stop again. By default, Ext JS effects will abruptly start and stop, but by using the easing option, we can specify how it will accelerate and decelerate at the start and end of the effect respectively.

A basic example of this in action is the easeBoth value. This causes the animation to gradually speed up and then slow down in order to provide a smooth-looking transition:

Ext.get('target').scale(50, 150, {easing: 'easeBoth'});

Here, we're applying the easing option to the scale effect, and by using easeBoth, we can have a less jarring movement as it progresses. There are many more easing options:

That's a list of the options supported by Ext JS Base. Ones like bounceIn provide a bit of a spring to the effect, which is perhaps more useful in a gaming application than in data entry, but the beauty of having such a wide choice is that you are likely to find something that fits your requirements.

The final few configuration options apply to the way your current effect interacts with other effects that may occur within its lifetime. For example, block will specify that no other effects are queued up while this one is running, which is useful in scenarios where triggering further changes could adversely affect your application's state. The block option tells all other effects to "bide your time" until things have calmed down.

Ext.get('target').shift({
x: 5,
y: 300,
width: 300,
height: 200,
block: true
});

Here, we see an interesting usage of the Ext.Fx.shift method, in which the shift-specific configuration options are augmented by the common Fx ones.

We also have the stopFx and concurrent options. stopFx allows us to cancel all effects that get triggered after this one, while concurrent specifies whether subsequent effects will run in parallel with this one, or will be queued up until after this one has completed. By default, they'll queue up and run in sequence, but there are situations in which you will be able to apply multiple effects at a time, and we'll talk more about that in the next few sections.

Although queuing is the default, we also have the option of running effects in parallel by using the previously-discussed concurrent configuration option. This gives us the opportunity to combine effects—for example, we could highlight an element as it scales up:

Ext.get('target').scale(300, 200 ,{
concurrent:true
}).highlight();

This provides a very powerful capacity for customization.

There are a number of extra methods within the Ext.Fx class that aren't directly responsible for creating effects. Instead, they can be used to manage and monitor effects that are already in the queue. A great example of this is the stopFx method, which is as simple as it sounds—we can call it to cancel any animations that are currently running. It also clears the effects queue, and primes the element for user interaction or further manipulation.

Interestingly, stopFx returns the target Ext.Element, allowing the developer to chain up further methods. Perhaps you have set up a slideIn that is subsequently canceled and replaced with slideOut:

Ext.get('target').stopFx().slideOut();

Such code is useful if we need to interrupt an animation to give control back to the user—an ability that can be crucial in giving the user the responsiveness they require. However, in other circumstances you may want to prevent the user from interfering with the current state of the application, and if that's the case, we have the hasFxBlock method. Typically, this is used to make sure that the user can't queue up the same effect many times—we can prevent additional effect calls to the element if hasFxBlock returns true.

Although it initially seems that the Ext.Element approach is better, there are actually a few compelling reasons for using the full LoadMask. The most interesting reason is that it can be tied to a specified Ext.data.Store instance, allowing you to automatically mask and unmask your element based on when the store is loading. This cuts down on your code when showing the mask, but it also negates the need to hook up an event listener for your load complete events. Let's take a look at how this feature can be used:

var slowStore = GetSlowStore();
var mask = new Ext.LoadMask(Ext.get('target'), {
store:slowStore
});
slowStore.load();

We're not interested in how to create a store, so that's been hidden away in a function call. All we care is that our example store is going to take a couple of seconds to finish loading. We instantiate a new LoadMask with an element as the first constructor parameter, and a configuration literal as the second one. The store property accepts our slowStore as its value.

Now that everything's set up, we simply call the load method of the store. This will mask over our target element, and in a few seconds when it has finished loading, the mask will automatically be dismissed.

As we've seen, there are a number of ways of manually masking elements, and you could use any of these approaches to the Ext.Elements that under-lie many Ext.Components. However, it's important to note that some components provide this functionality for you, cutting down on the code that you need to write in order to enable this feature in your applications. For example, the Ext.grid.GridPanel has a boolean loadMask configuration option, which not only masks the panel but also automatically ties in to the datasource that is feeding the GridPanel.