Tutorial hero
Lesson icon

Sencha Touch 2.4 and the New Toast Component

Originally published September 16, 2014 Time 2 mins

The introduction of Sencha Touch 2.4.0 didn’t exactly bring a ton of exciting new features (unless you’re developing for BlackBerry of course). You can take a look at the complete release notes, which details changes to BlackBerry support that have been made as well as some bug fixes.

While the meaty part of this update is in the added BlackBerry support, we were also given a new feature: Toasts. If you’ve done any development in Java for Android you would probably be familiar with the concept of a toast. It’s quick message displayed to the user on the screen which then fades.

Toast

I’m not sure if the name was derived from similarities to someone making a toast at a party, or perhaps the nature in which it pops up is similar to a toaster – either way it’s not important. What is important is how we can make use of it in Sencha Touch, so let’s do that.

Adding a Toast to your application

First make sure you’ve upgraded to the latest version of Sencha Touch, otherwise you won’t be able to use this. Once you’ve done that, fortunately it’s very simple to add a toast to your application. Make sure you require the Toast class:

requires: [
        'Ext.Toast'
    ],

and then add the following code where you want the Toast to trigger:

Ext.toast('Hey there');

This will cause a Toast to display on the screen for 1 second. Alternatively you can also supply a time (in milliseconds) to specify how long the Toast should remain open:

Ext.toast('I will vanish after 3 seconds', 3000);

This is a pretty useful addition. Sencha Touch did already support the message box and confirm box, but both of these required interaction from the user (i.e. pushing ‘OK’) – with Toasts we now have a convenient way to display a quick message to the user.

Learn to build modern Angular apps with my course