1

我有一个最初加载时间很长的应用程序，所以我尝试制作一个启动画面。它“几乎”完美地工作。我收到以下错误：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(); 这是在afteranimate函数中。我被难住了......

4

1 回答 1

0

不相关，但您在该代码中有一个竞争条件，使您难以重现错误。我不得不推迟Ext.getBody().unmask()通话才能触发它。

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

所以解决方案是简单地删除动画配置中的两remove: true行，并且 unmask 将负责处理 DOM 元素本身。

于 2013-05-24T12:49:28.033 回答