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

Question

我最初有一个很长的加载应用程序，所以我尝试制作一个初始屏幕。 它“几乎”完美地工作。 我收到以下错误： Uncaught TypeError: Cannot read property 'style' of undefined该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（）;。 在动画后功能中。 我感到难过.....

Answer 1

无关，但是您在该代码中遇到了竞争状况，这使您难以重现错误。 我不得不延迟Ext.getBody().unmask()调用来触发它。

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

因此，解决方案就是删除两个remove: true anims配置中的remove: true行，而unmask将处理DOM元素本身。