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

【问题标题】：ExtJS 4.1 MVC: How to apply LoadMask to viewport while loading?ExtJS 4.1 MVC：如何在加载时将 LoadMask 应用于视口？
【发布时间】：2012-07-10 12:29:08
【问题描述】：

在加载所需文件时如何将LoadMask 应用于standard ExtJS MVC application 的视口？

这样的 MVC 应用程序的一个示例是 app.js 的以下 sn-p：

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 是一个用于MVC 视图的xtype，它可能会扩展一个ExtJS Panel 等。

这种普遍存在的要求是否存在标准方法？

【问题讨论】：

标签： extjs extjs-mvc extjs4.1

【解决方案1】：

您要做的是在 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();
}

【讨论】：

【解决方案2】：

第一个解决方案很好。另一种选择是：

http://blog.newbridgegreen.com/extjs-4-splash-screen/

【讨论】：