When working with large Ext JS applications, it is normal to have a short 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 what is shown in the following screenshot:

First, we need to understand how this splash screen will work. After the user loads the application, the splash screen will be displayed. The application will show the splash screen while it loads all the required classes and code so that 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 on the launch method. The question now is: where inside Ext...