Monday, April 9, 2012

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.




7 comments:

  1. Very helpful, thx for posting

    ReplyDelete
  2. can you please post a screenshot of how it looks like?

    ReplyDelete
  3. but the spinner is not centered, how to make it centered ?

    ReplyDelete
  4. I'm getting the following error for 'Ext.util.DelayedTask':
    Uncaught TypeError: undefined is not a function

    ST v2.1.1

    ReplyDelete
  5. Can you please post screenshots too so we can know how it looked and if possible then source code too.

    ReplyDelete
  6. Hi Your blog is awesome, but could you please change the background to something else from Black. At work when i open your blog people look with doubt at me as if I have opened a banned site. Doesnt give a good impression.

    Thanks

    ReplyDelete