Splash Screen

[Wedgybo]

Hey all,

I've just written up a post about creating a splash screen for your ExtJS 4 applications. I'll paste the code snippets here. You can read the full post here for more detail.

app.js

var splashscreen;
    
Ext.onReady(function() {
        // Start the mask on the body and get a reference to the mask
        splashscreen = Ext.getBody().mask('Loading application', 'splashscreen');
        // Add a new class to this mask as we want it to look different from the default.
        splashscreen.addCls('splashscreen');
    
        // Insert a new div before the loading icon where we can place our logo.
        Ext.DomHelper.insertFirst(Ext.query('.x-mask-msg')[0], {
            cls: 'x-splash-icon'
        });
});

var app = Ext.application({
        name: 'storehr',
        appFolder: 'storehr',
        launch: function() {
            // Setup a task to fadeOut the splashscreen
            var task = new Ext.util.DelayedTask(function() {
                // Fade out the body mask
                splashscreen.fadeOut({
                    duration: 1000,
                    remove:true
                });
                // Fade out the icon and message
                splashscreen.next().fadeOut({
                    duration: 1000,
                    remove:true,
                    listeners: {
                        afteranimate: function() {
                            // Set the body as unmasked after the animation
                            Ext.getBody().unmask();
                        }
                    }
                });
            });
            // Run the fade 500 milliseconds after launch.
            task.delay(500);
        },
        autoCreateViewport: true
});

style.css

.x-mask.splashscreen {
        background-color: white;
        opacity: 1;
}
    
.x-mask-msg.splashscreen,
.x-mask-msg.splashscreen div {
        font-size: 16px;
        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 {
        /* Important required due to the loading symbols CSS selector */
        background-image: url('images/logo-splash.png') !important;
        margin-top: -30px;
        margin-bottom: 10px;
}

[scottmartin]

Very nice. Thank you for the post!

Scott.

[hschaefer123]

Hi Wedgybo,
You are using ext for adding Splash Screen, but your html has to wait until ext is Loaded and ready!

I am using the Old ext 3 Approach adding splashscreen DIV right into html and also avoiding using refrenced Images. Also use base64 included images inside inline css (do not use loaded css for this). This Way the Splashscreen will Directly be Shown and then Removed the Same Way you does. The inline CSS will be Shown lighspeed fast.

This is behause i use a largE ext Lib containing all ux Classes.

Cheers Holger

[Wedgybo]

Cheers Scott,

Makes a lot of sense Holger!

The delay in loading the core Ext library is very small compared to our compressed application file and the API calls we make first, so I wasn't too worried about the ExtJS loading time. It's defiantly worth considering if you want to make it that little bit snappier though! I might have a play and update the tutorial.

[IvanJouikov]

In head:

<style>        <!-- "Loading" Splash Screen Style -->
            #loading-mask
        {
          position: absolute;
          left:     0;
          top:      0;
          width:    100%;
          height:   100%;
          z-index:  20000;
          background-color: #3892d3;
        }


        #loading-parent
        {
          position: absolute;
          z-index:  20001;
          height: 100%;
          width: 100%;
          padding-top: 50px;
          color: white;
        }
    </style>

In body:

    <!-- "Loading" Splash Screen -->
    <div id="loading-mask"></div>
    <div id="loading-parent">
        <div id="loading-child" class="loading-indicator">
            <center>
                <img height="50" alt="Spinner" src="images/ajax-loader.gif" />
                <br /><br />
                <h1>Loading MyTestApp.com...</h1>
            </center>
        </div>
    </div>

In onReady/application.launch:

    launch: function() {
        var me = this;
        
        // Create the actual viewport in body
        Ext.create('SBC.view.Viewport', {
            renderTo: Ext.getBody(),
            listeners: {
                afterrender: function() {
                    var mask = Ext.get('loading-mask'),
                        parent = Ext.get('loading-parent');
                    // Destroy the masks
                    mask.fadeOut({callback: function(){ mask.destroy(); }});
                    parent.fadeOut({callback: function(){ parent.destroy(); }});
                }
            } // eo listeners
        }); // eo Ext.create
    }

[johanhaest]

I took the same approach as Ivan did, we build the mask in static html so the loading of ExtJS itself is covered in the mask aswell. Don't get met wrong your approach is good but ExtJS takes 1-2 seconds to load for some clients so a loading mask is appropriate.

[loiane]

Just a tip: you do not need to use Ext.onReady and Ext.application.
Ext.application already calls Ext.onReady.

You can add your Ext.OnReady code inside the init function of Ext.application

[msuppahiya]

awesome!!!!
using inside app lauch with Extjs4.2
grt