如果我想在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这样的事件但是BEFORE而不是AFTER之后。任何人都知道如何实现它?
更新:我几乎在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”事件监听器,它总是停留在同一个选项卡上,即使我们点击按钮也不会显示其他选项卡。然而,新标签的绘制事件被解雇了。
答案 0 :(得分:1)
我不确定你能否达到这样的结果,因为通常我在点击事件上应用Ajax或Json请求时只使用Ext.LoadMask
。
但是在你的情况下,每个面板的tabpanel内容已经加载,所以当你在这里使用masking时,我觉得有点多余的任务。但是,如果你的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();
}};
顺便说一下,在定义tabpanel的所有项目之后,需要放置此activeitemchange
事件。希望它有所帮助:)