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
Code:
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
Code:
.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;
}