Sencha Touch 2 - Ext.LoadMask on TabPanel 项目更改

Question

如果我想在 Sencha Touch 2 的选项卡更改之间的选项卡面板上显示加载掩码。什么是正确的方法？

我想在按下选项卡按钮时显示加载蒙版，并在面板正确显示后立即将其隐藏。

Ext.define("MyProject.view.Main", {
extend: 'Ext.tab.Panel',
requires: [
'Ext.TitleBar','Ext.MessageBox'
],
config: {
fullscreen: true,
tabBarPosition: 'bottom',
layout: {
type: 'card',
animation: 'fade' //false, fade, flip, pop, scroll, slide
},
items: [
{
xtype: 'panel1',
masked: {
xtype:'loadmask',                        
message:'Chargement...'
},
listeners: {
painted: function(container, value, oldValue, eOpts) {
//Ext.Msg.alert('Test', 'painted');
this.setMasked(false);
}
}
},
{
xtype: 'panel2',
masked: {
xtype:'loadmask',                        
message:'Chargement...'
},
listeners: {
painted: function(container, value, oldValue, eOpts) {
//Ext.Msg.alert('Test', 'painted');
this.setMasked(false);
}
}
},

问题是事件被捕获，但由于我在子项创建中显示蒙版，因此遮罩未显示。我需要像onActiveItemChanged这样的事件，但在之前而不是之后触发。任何人都对我如何实现它有一个想法？

更新：我几乎通过添加在Sencha Touch论坛上找到的代码来做到这一点。在主视图(选项卡面板)级别添加：

listeners: {
delegate : 'tabbar > tab',
tap : function() {
Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
}
}

然后，在每个项目上，我在标签面板中添加：

xtype: 'panel1',
listeners: {
painted: function(container, value, oldValue, eOpts) {
Ext.Viewport.setMask('false');
}
}

但现在的问题是，由于我覆盖了默认的"tap"事件侦听器，因此它始终保持在同一选项卡上，即使我们单击按钮也永远不会显示其他选项卡。然而，新选项卡的绘制事件被触发。

Answer 1

我不确定您是否能达到这样的结果，因为通常我在点击事件上应用 Ajax 或 Json 请求时只使用Ext.LoadMask。

但是在您的情况下，每个面板的选项卡面板内容已经加载，因此当您在此处使用遮罩时，我觉得有点多余的任务。但是，您可以加载假面具，例如，当您的activeitemchange事件像这样触发时一秒钟：

listeners: {
activeitemchange:function(){
function setMask() {
Ext.Viewport.mask({ xtype: 'loadmask', message: 'Chargement...' });
}
function unMask() {
Ext.Viewport.unmask();
}
function start() {
setMask();
setTimeout(unMask, 1000); // execute the mask in 1 second
}
start();
}}; 

顺便说一下，这个activeitemchange事件需要在定义选项卡面板的所有项目之后放置。希望对:)有所帮助