1

アプリの初期ロードが長いので、スプラッシュ画面を作ってみました。「ほぼ」完全に機能します。次のエラーが表示されます: Uncaught TypeError: Cannot read property 'style' of undefinedapp.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()それをトリガーするために呼び出しを遅らせなければなりませんでした。

問題は、オプションが原因で、マスク解除メソッドがアクセスしようとする DOM 要素をアニメーションが破壊していることですremove: true。ただし、Ext は内部でマスクを追跡しているunmask()ため、後で予測できない動作を避けるために呼び出す必要があります。

したがって、解決策はremove: true、anims 構成で 2 行を削除するだけです。マスクを解除すると、DOM 要素自体が破棄されます。

于 2013-05-24T12:49:28.033 に答える