1. #1
    Sencha User Wedgybo's Avatar
    Join Date
    Jul 2011
    Location
    Edinburgh, Scotland
    Posts
    17
    Vote Rating
    11
    Wedgybo will become famous soon enough

      4  

    Default Splash Screen

    Splash Screen


    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;
    }

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Very nice. Thank you for the post!

    Scott.

  3. #3
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    12
    hschaefer123 will become famous soon enough

      2  

    Default


    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

  4. #4
    Sencha User Wedgybo's Avatar
    Join Date
    Jul 2011
    Location
    Edinburgh, Scotland
    Posts
    17
    Vote Rating
    11
    Wedgybo will become famous soon enough

      0  

    Default


    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.

  5. #5
    Sencha - Services Team
    Join Date
    Feb 2013
    Posts
    47
    Vote Rating
    5
    IvanJouikov is on a distinguished road

      2  

    Default


    In head:

    Code:
    <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:



    Code:
        <!-- "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:
    Code:
    
        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
        }

  6. #6
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Vote Rating
    6
    johanhaest is on a distinguished road

      1  

    Default


    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.

  7. #7
    Sencha User loiane's Avatar
    Join Date
    Aug 2009
    Posts
    184
    Vote Rating
    53
    loiane is a jewel in the rough loiane is a jewel in the rough loiane is a jewel in the rough

      1  

    Default


    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
    Sencha/Java evangelist
    Author of ExtJS 4 First Look and Mastering Ext JS books
    English blog: http://loianegroner.com
    Portuguese blog: http://loiane.com
    Sencha Examples: https://github.com/loiane

  8. #8
    Sencha User
    Join Date
    Oct 2012
    Posts
    1
    Vote Rating
    0
    msuppahiya is on a distinguished road

      0  

    Default


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

  9. #9
    Touch Premium Member
    Join Date
    Jun 2008
    Location
    Germany, Dortmund
    Posts
    249
    Vote Rating
    12
    hschaefer123 will become famous soon enough

      0  

    Default


    Currently playing around with new SplashScreen inside Ext 4.2.x.

    I want to use DOM based DIV container to be shown while loading libs and then softly bring App.Viewport into focus (fadeIn) while fadingOut the SplashScreen.

    After some tricky investigtaions, i found out my working solution.

    Inside App do not use AutoCreateViewport!

    Instead i do this inside App.launch():

    Code:
    // generate viewport and fadeIn App
    var viewPort = Ext.create('MyApp.view.AppViewport');
    Ext.fly(viewPort.getId() + '-innerCt')
    	.setOpacity(0) // needed to be able to fadeIn viewport
    	.fadeIn({ duration: 500, useDisplay: true });
    
    
    // fadeOut SplashScreen and remove from DOM
    Ext.fly('splash-screen')
    	.fadeOut({ duration: 800, remove: true });
    Maybe this will solve some time doing something similar.