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

问题描述

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

此类 MVC 应用程序的示例是以下 app.js 片段:

Ext.Loader.setConfig({enabled:true});外部应用程序({要求:['Ext.container.Viewport',],名称: 'APP',应用文件夹:'应用'，控制器: ['主要的'],启动:函数(){Ext.create('Ext.container.Viewport', {布局:'适合'，项目: [{xtype:'主要'}]});}});

上面的 main 是一个用于 MVC 视图的 xtype，它可能会扩展一个 ExtJS Panel 等

对于这个普遍存在的需求，是否存在标准方法?

解决方案

您想要做的是在 index.html 文件中显示加载图像.类似的东西:

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

然后在你的 launch() 函数中隐藏这个 div:

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

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

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'
                }               
            ]
        });
    }
});

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

Does a standard approach for this ubiquitous requirement exist?

解决方案

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>

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屋！