javascript - ExtJS4启动画面app.js返回错误

我最初有一个很长的加载应用程序，所以我尝试制作一个启动屏幕。它“几乎”完美地工作。我收到以下错误：Uncaught TypeError: Cannot read property 'style' of undefined指向我app.js中的特定行。但是，我只是看不出问题出在哪里。初始屏幕加载良好，并且淡出（几乎）消失。我注意到的是，似乎我创建的div仍然存在，但您看不到它，但是它仍然掩盖了输入的内容。这是我的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
});

我的样式表：

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

错误指向代码行Ext.getBody（）。unmask（）;。在动画后功能中。我感到难过.....

最佳答案

无关，但是您的代码中存在竞争条件，使您难以重现错误。我不得不延迟Ext.getBody().unmask()调用来触发它。

问题在于，由于remove: true选项，您的动画正在破坏unmask方法尝试访问的DOM元素。但是，由于Ext在内部跟踪掩码，的确要求您调用unmask()以避免以后发生不可预测的行为。

因此，解决方案就是简单地删除动画配置中的两条remove: true行，并且取消屏蔽将处理DOM元素本身。