How to add a Sencha ExtJS splash (loading) screen

I’ve written a couple of small Sencha ExtJS applications lately, and I can confirm that the following technique works to display a splash screen while your application is loading.

(This isn’t a tutorial per se. I assume that you know how to use ExtJS, and just want to see how to implement a splash screen (loading page) as the user waits for the application to load.)

In short, you’ll want code like this in your Ext.application function:

// create a reference in Ext.application so we can access it from multiple functions
splashscreen: {},

init: function() {
    // start the mask on the body and get a reference to the mask
     splashscreen = Ext.getBody().mask('Loading AlRadio, please stand by ...', 'splashscreen');
},

launch: function() {

    Ext.tip.QuickTipManager.init();
    var task = new Ext.util.DelayedTask(function() {

        // fade out the body mask
        splashscreen.fadeOut({
            duration: 500,
            remove: true
        });

        // fade out the message
        splashscreen.next().fadeOut({
            duration: 500,
            remove: true
        });

   });

   task.delay(1000);

}

That is known to work on a project I used to call AlRadio, and now call Radio Pi (thanks to a friend for the better name). The full function code is shown here:

Ext.application({
    name: 'Radio',
    extend: 'Radio.Application',
   
    requires: [
        'Ext.form.Panel',
        'Ext.grid.Panel',
        'Ext.slider.Single',
        'Radio.store.RecordedStreams',
        'Radio.store.Podcasts'
    ],

    views: [
        'Radio.view.RadioStationsPanel',
        'Radio.view.RadioStreamsPanel',
        'Radio.view.RecordedStreamsPanel',
        'Radio.view.PodcastsPanel',
        'Radio.view.VcrControlPanel',
    ],

    controllers: [
        'Radio.controller.RadioStations',
        'Radio.controller.RadioStreams',
        'Radio.controller.VcrController',
        'Radio.controller.RecordedStreamsController',
        'Radio.controller.PodcastsController'
    ],

    models: [
        'Radio.model.RadioStation',
        'Radio.model.RadioStream',
        'Radio.model.RecordedStream',
        'Radio.model.Podcast'
    ],

    stores: [
        'Radio.store.RadioStations',
        'Radio.store.RadioStreams',
        'Radio.store.RecordedStreams',
        'Radio.store.Podcasts'
    ],

    autoCreateViewport: true,

    // create a reference in Ext.application so we can access it from multiple functions
    splashscreen: {},

    init: function() {
        // start the mask on the body and get a reference to the mask
         splashscreen = Ext.getBody().mask('Loading AlRadio, please stand by ...', 'splashscreen');
    },

    launch: function() {

        Ext.tip.QuickTipManager.init();
        var task = new Ext.util.DelayedTask(function() {

            // fade out the body mask
            splashscreen.fadeOut({
                duration: 500,
                remove: true
            });

            // fade out the message
            splashscreen.next().fadeOut({
                duration: 500,
                remove: true
            });

       });

       task.delay(1000);

    }

});

I think I found this technique in the book, Mastering Ext JS. That book shows more techniques you can use to add custom images to your splashscreen.