Splash Screen

[mwmayer4]

We have a large app that initially takes a long time to load. So I tried making a splash screen to mask the body until the app was ready to load. I've "almost" got it working just like I want. I get my logo and loadingMask to come up and fade out. However, I'm getting an error that says, "Uncaught TypeError: Cannot read property 'style' of undefined ". It is pointing to a line in my app.js which deals with splashscreen.next.fadeOut.listeners.afteranimate (as you will see in the code below). I can't figure out where I went wrong. the line of code it points to says... Ext.getBody().unmask();

One thing that's interesting is, that if you hover the mouse over the area where the .jpg is displayed, you get a spinning-wheel mouse cursor, as if it's still there; but it has long since faded out..

My app.js:

Ext.Loader.setConfig({
    enabled: true
});

var splashscreen;

Ext.onReady(function() {
    // Start the mask on the body and get a reference to the mask
    splashscreen = Ext.getBody().mask('Rex Dashboard Loading...', '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'
    });
});

Ext.create('Ext.app.Application', {
	controllers: ['Main'],
	stores: ['Saless','ProdGrid002s','ProdGrid008s','ProdGrid009s','Unitcosts','Prepaids',
             'Logintakes','WasteTickets','InventoryFinisheds','InventoryRoughs'],
	name: 'Dash1',
	appFolder: '/html/rexlumber-dev/millapps/dashboards/Dash1/app',
        launch: function() {
        // Setup a task to fadeOut the splashscreen
        var apptask = new Ext.util.DelayedTask(function() {
            // Fade out the body mask
            splashscreen.fadeOut({
                duration: 2000,
                remove:true
            });
            // Fade out the icon and message
            splashscreen.next().fadeOut({
                duration: 2000,
                remove:true,
                listeners: {
                    afteranimate: function() {
                        // Set the body as unmasked after the animation
                        Ext.getBody().unmask();  //<-----where error points too
                    }
                }
            });
        });
        // Run the fade after launch.
        apptask.delay(1000);
    },
    
	autoCreateViewport: true
});

My Style Sheet:

.x-mask.splashscreen {
    background-color: white;
    opacity: 1;
}
.x-mask-msg.splashscreen,
.x-mask-msg.splashscreen div {
    font-size: 18px;
    padding: 110px 110px 50px 110px;
    border: none;
    background-color: transparent;
    background-position: top center;
}
.x-message-box .x-window-body .x-box-inner {
    min-height: 200px !important;
}
.x-splash-icon {
    /* Important required due to the loading symbols CSS selector */
    background-image: url('/vvresources/images/gracevlogo.jpg') !important;
    margin-top: -30px;
    margin-bottom: 20px;
}

[eweiler]

Are you masking/unmasking the body AND putting up a splash screen div?

Maybe the Body Element isn't rendered yet is my guess.

[mwmayer4]

Yes, at least that was the plan.. masking the body, putting of a splash screen div and then fading it out and unmasking the body...
i wouldn't think the the body element not being rendered yet is it because once the task ends, the unmask should work even if it's not ready.. then again, the splashscreen shouldn't run until onReady... so idk....
it's acting as if the splash screen div is "still there" even though you can't see it...
and only the div area is masked.. all the other code in the app runs & works...
have no clue ....

[mwmayer4]

there's no reason i can't use two style sheets is there? since the error say can't read property 'style' of undefined, just thought i'd throw that out there...

[mwmayer4]

Solved!! the anims are destroying the DOM elements that the unmask method tries to access, because of the remove: true options. I took out both of the remove: true and the DOM took care of disposing of the elements itself.