ExtJS4 splash screen app.js returns error

Question

I have a initially long loading app, so I tried making a splash screen. It "almost" works perfectly. I'm getting the following error: Uncaught TypeError: Cannot read property 'style' of undefined which points to a specific line in my app.js. However, I just can't see what's wrong with it. The splash screen loads fine and fades out fine (almost). What I notice is that it appears the div I created is still there yet you can't see it but it's still masking the body from input. Here's 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('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', 'Shipments'],
    name: 'Dash1',
    appFolder: '/html/cgi-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();
                    }
                }
            });
        });
        // 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('/resources/images/logo.jpg') !important;
    margin-top: -30px;
    margin-bottom: 20px;
}

The error points to the line of code Ext.getBody().unmask(); which is in the afteranimate function. I'm stumped.....

Answer 1

Unrelated, but you've got a race condition in that code that made you error hard to reproduce. I've had to delay the Ext.getBody().unmask() call to trigger it.

The problem is that your anims are destroying the DOM elements that the unmask method tries to access, because of the remove: true options. However, since Ext keeps track of the mask internally, you are indeed required to call unmask() to avoid unpredictable behaviors later on.

So the solution is simply to remove the two remove: true lines in your anims config, and unmask will take care of disposing of the DOM elements itself.