ExtJS 4.1 MVC：如何在加载时将 LoadMask 应用于视口？

如何申请LoadMask http://docs.sencha.com/ext-js/4-1/#!/api/Ext.LoadMask for a 标准 ExtJS MVC 应用程序 http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture加载所需文件时的视口？

此类 MVC 应用程序的一个示例是以下代码片段：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'
                }               
            ]
        });
    }
});

where main上面是一个xtype对于 MVC 视图，可能会扩展 ExtJSPanel etc.

是否有一个标准方法无处不在的要求存在吗？

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

<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在你的launch()功能：

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