Sencha 触摸应用程序加载蒙版

Posted 2023-02-25

【中文标题】Sencha 触摸应用程序加载蒙版

【英文标题】：Sencha touch application loading mask

【发布时间】：2011-10-13 05:53:25

【问题描述】：

我有一个 sencha touch 应用程序，但想在页面加载时对整个应用程序应用加载掩码。 （即在加载 javascript 文件等时）

在 ExtJS 中，我曾经有一个带有加载图像的全尺寸 div，然后作为“onReady”的第一个操作，我曾经淡出该 div，然后将其删除。不幸的是，FadeOut() 在 SenchaTouch 中似乎不可用

我的应用定义如下：

Ext.application(
    name: 'MyApp',

    launch: function() 
        Ext.create('Ext.Panel', 
            fullscreen: true,
            html: 'Hello World'
        );
    
);

任何指针都会被欣赏

【参考方案1】：

您可以使用 Ext.LoadMask 类。有一个例子：

var myMask = new Ext.LoadMask(Ext.getBody(), msg:"Please wait...");
myMask.show();

当您完成加载一些 Ajax 请求或完成您的任务并移除掩码后，您可以：

myMask.hide();

【讨论】：

感谢您的回答。在加载 .js 文件之前，我希望有一个加载掩码。在 ExtJS 中，我通常只放入一个全屏 div 并在应用程序准备好时将其淡出。但是fadeOut() 似乎不起作用...

【参考方案2】：

您也可以在执行 ajax 请求和加载数据时尝试以下代码

var mask = new Ext.LoadMask(Ext.getBody(), msg:"wait msg...");                


                Ext.Ajax.on('beforerequest', function()        

                        mask.show();
                );


                Ext.Ajax.on('requestcomplete', function()      

                        mask.hide();
                );             


                Ext.Ajax.on('requestexception', function()         

                );

【参考方案3】：

我是这样处理的：

Ext.getBody().mask().addCls('black-background');

.black-background 
  opacity: 1;
  background: black;