ExtJS 4.1 MVC：如何在加载时将LoadMask应用于视口？ [英] ExtJS 4.1 MVC: How to apply LoadMask to viewport while loading?

问题描述

如何应用 LoadMask 标准ExtJS MVC应用程序的视口，而它正在加载所需的文件？

How to apply a LoadMask for a standard ExtJS MVC application's viewport while it is loading the required files?

这样的MVC应用程序的一个例子是 app.js 的以下代码段：

An example of such MVC application is the following snippet for app.js:

Ext.Loader.setConfig({enabled:true});

Ext.application({
    requires: [
       'Ext.container.Viewport',
    ],

    name: 'APP',
    appFolder: 'app',

    controllers: [
        'Main'
    ],

    launch: function() {

        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items: [
                {
                    xtype: 'main'
                }               
            ]
        });
    }
});

其中 main 以上是 xtype 用于MVC视图，可能会扩展ExtJS 面板等。

where main above is an xtype for an MVC view, that might extend an ExtJS Panel etc.

推荐答案

您想要做的是在index.html文件中显示加载图像。这样的：

What you want to do is to show loading image inside your index.html file. something like that:

<div id="page-loader">  
    <img style="position:absolute; width:128px; height:15px; left:50%; top:50%; margin-left:-64px; margin-top: -7px;" src="resources/images/loader.gif" />
</div>

然后将 div code> launch（） function：

And then hide this div in your launch() function:

if (Ext.get('page-loader')) {
    Ext.get('page-loader').remove();
}

这篇关于ExtJS 4.1 MVC：如何在加载时将LoadMask应用于视口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！