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.

Add new comment

The content of this field is kept private and will not be shown publicly.

Anonymous format

  • Allowed HTML tags: <em> <strong> <cite> <code> <ul type> <ol start type> <li> <pre>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.