When working with large Ext JS applications, it is normal to have a small delay when loading the application. This happens because Ext JS is loading all the required classes to have the application up and running and meanwhile, all the users see is a blank screen, which can be annoying for them. A very common solution to this problem is to have a loading page, also known as a splash screen.

So let's add a splash screen to our application that looks like the following:

First we need to understand how this splash screen will work. At the moment the user loads the application and the loading screen will be displayed. The application will show the splash screen while it loads all the required classes and code so the application can be used.

We already know that the application calls the launch function when it is ready to be used. So we know that we will need to remove the splash screen from the launch method. The question now is where inside Ext.application can we call the splash screen? The answer is inside the init function. The init function is called when the application boots so it gives some time for all required code to be loaded and after that the launch function is called.

Now that we know how the splash screen will work, let's implement it.

Inside Ext.application, we will implement a function called init:

init: function() {
     splashscreen = Ext.getBody().mask('Loading application', 'splashscreen');
},

All we need to do is apply a mask into the HTML body of the application (Ext.getBody()), and that is why we are calling the mask method passing the loading message ("Loading Application") and applying a CSS, which will be loading gif and is already part of the Ext JS CSS ("splashscreen"). The mask method will return Ext.dom.Element, which we will need to manipulate later (remove the mask from the HTML body) and for this reason, we need to keep a reference to Ext.dom.Element and we will store this reference inside an attribute of Ext.application:

splashscreen: {},

With the code of the init method only, we will have a loading screen as the following:

If this is all you need that is ok. But let's go a little bit further and customize the loading screen adding a logo image so it can look like the first image of this topic, which is our final output.

First, we need to create a CSS file which will contain all the CSS for our application. We will name it app.css and we will also create it inside a resources folder:

Inside resources we will also create an images folder with the Packt logo image.

We also must not forget to add the new CSS file into index.html:

<link rel="stylesheet" href="resources/css/app.css">

And the app.css file will look like the following:
.x-mask.splashscreen {
    background-color: white;
    opacity: 1;
}

.x-mask-msg.splashscreen,
.x-mask-msg.splashscreen div {
    font-size: 16px;
    font-weight: bold;
    padding: 30px 5px 5px 5px;
    border: none;
    background-color: transparent;
    background-position: top center;
}

.x-message-box .x-window-body .x-box-inner {
    min-height: 110px !important;
}

.x-splash-icon {
    background-image: url('../images/packt-logo.png') !important;
    margin-top: -30px;
    margin-bottom: 15px;
    height: 100px;
}

Now let's go back to the app.js file and continue to add some code to the init function.

If we add the following code after the code we already have:

splashscreen.addCls('splashscreen');

We will be adding a new CSS style to the loading DIV tag. Note that the following styles from our app.css file will be applied: .x-mask.splashscreen and .x-mask-msg.splashscreen div. This will make the background white instead of gray and it is also going to change the font of the "Loading Application" message.

This is how the generated HTML will be:

Now we will add the following code in the init function:

Ext.DomHelper.insertFirst(Ext.query('.x-mask-msg')[0], {
     cls: 'x-splash-icon'
});

The previous code will search for the first DIV tag that contains the .x-mask-msg class (Ext.query('.x-mask-msg')[0]) and will add a new DIV tag as child with the class x-splash-icon that will be responsible for adding the logo image above the loading message.

And this is how the generated HTML will be:

After we execute the previous code, we will have an output exactly as the image we showed at the beginning of this topic.

Now we already have the splash screen being displayed. We need to work on the launch function to remove the splash screen after all the code the application needs is loaded, otherwise the loading message will be there indefinitely!

To remove the splash screen the only code we need to add to the launch function is the following one, which is removing the mask from the HTML body:

Ext.getBody().unmask();

However, removing the mask abruptly is not nice because the user cannot even see the loading message. Instead of only removing the mask, let's give the user 2 seconds to see the loading message after the application is ready:

var task = new Ext.util.DelayedTask(function() { // #1
     Ext.getBody().unmask(); // #2
});

task.delay(2000); // #3

To do so, we are going to use the DelayedTask class (#1), which is a class that provides a chance of a function to be executed after the given timeout in milliseconds (#3). So in the case of the task, we are removing the mask from the HTML body (#2) after two seconds of timeout (2,000 milliseconds).

If we test the output right now, it works, but it is still not nice for the user. It would be even better if we can add an animation to the masking. So we will add a fade out animation (which animates the opacity of an element from opaque to transparent) and after the animation we will remove the masking (inside the Ext.util.DelayedTask function).

splashscreen.fadeOut({
    duration: 1000,
    remove:true
});

After we execute this code, notice that the loading message is still being displayed. We need to analyze the generated HTML to find out why.

Before we call the fadeOut function, the following screenshot is the HTML of the loading message:

After we call the fadeout function, the HTML will be the following:

Only the first DIV tag with the class splashscreen was faded out. We need to also fade out the DIV tag with class x-mask-msg splashscreen that contains the logo and the loading message.

splashscreen.next().fadeOut({
    duration: 1000,
    remove:true
});

The output will be a pleasant animation that is shown to the user. Also note that the splashscreen DIV tag is removed from the generated HTML:

After the loading mask is removed, we need to display the initial component of our application. We will be showing a login screen that we will implement in the next chapter. For now, we will add a console message (#1) just to know where we need to call the initial component. The complete code for the launch function will be the following:

launch: function() {
    var task = new Ext.util.DelayedTask(function() {

        splashscreen.fadeOut({
            duration: 1000,
            remove:true
        });

        splashscreen.next().fadeOut({
            duration: 1000,
            remove:true
        });

        console.log('launch'); // #1
    });

    task.delay(2000);
}