Question

我有一个最初很长的加载应用程序，所以我尝试制作启动画面。它“几乎”完美地运作。我收到以下错误：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功能。我很难过.....

Answer 1

不相关，但您在该代码中遇到了一个竞争条件，导致您难以重现错误。我不得不推迟Ext.getBody().unmask()来触发它。

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

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

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

1 个答案: