How to create Splash screen for Sencha touch application?

Hello,

This is blog post is all about creating splash screen for sencha touch application. We all know that Sencha touch displays startup image while app is busy in loading necessary JavaScript files. However this image will only be displayed for few seconds. What if you want to display splash screen for users to have a feel that application is loading necessary data and will start in some time.

Following is the code to accomplish this. You have to write this code in app.js file


launch: function () {
        Ext.Viewport.setMasked({
            xtype: 'loadmask',
            message: 'My Message'
        });
        new Ext.util.DelayedTask(function () {
            Ext.Viewport.setMasked(false);
            Ext.Viewport.add({
                xclass: 'MyApp.view.Main'
            });

        }).delay(5000);
    }

Above code will display load mask for 5 seconds and than it will add your main view to viewport. You can also override Ext.LoadMask if you want to display your brand logo or images etc. See the following code


Ext.override(Ext.LoadMask, {
getTemplate: function() {
        var prefix = Ext.baseCSSPrefix;

        return [
            {
                //it needs an inner so it can be centered within the mask, and have a background
                reference: 'innerElement',
                cls: prefix + 'mask-inner',
                children: [
                //the elements required for the CSS loading {@link #indicator}
                    {
                        html: '<img src="images/MyLogo.png"/>'
                    },
                    {
                        reference: 'indicatorElement',
                        cls: prefix + 'loading-spinner-outer',
                        children: [
                            {
                                cls: prefix + 'loading-spinner',
                                children: [
                                    { tag: 'span', cls: prefix + 'loading-top' },
                                    { tag: 'span', cls: prefix + 'loading-right' },
                                    { tag: 'span', cls: prefix + 'loading-bottom' },
                                    { tag: 'span', cls: prefix + 'loading-left' }
                                ]
                            }
                        ]
                    },
                    //the element used to display the {@link #message}
                    {
                        reference: 'messageElement'
                    }
                ]
            }
        ];
    }
});

Check this code


{
      html: '<img src="images/MyLogo.png"/>'
}

This will add an extra logo to your loading screen. This is how you can add any other extra content to your splash screen.

Hope this helps you.