PDA

View Full Version : mask() / unmask() into a tabpanel



alessio77
8 Jun 2012, 2:01 AM
i've a tabpanel with 2 tabs, in one of these i've a iframe where i've managed the load and render events in order to apply "the mask with the wait icon" and than to remove it.
it works correctly, the mask is applied when i call "mask()" and is removed when i call "unmask()" but if i go on the other tab the mask re-appear,
probably "unmask()" doesn't remove this mask but only hide it, is there any other methods that destroy at all the mask? or something similar?
the code:


var tab = Ext.createWidget('tabpanel', {
width: 450,
region: 'center',
activeTab: 0,
defaults: {
bodyPadding: 10
},
items: [
{
title: 'Nuovo documento',
html: "Da qui sarÓ possibile aggiungere un nuovo documento",
closable: false//true
},
{
title: 'documento 1',
xtype: 'box',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%;',
src: '\resources\myFile.pdf'
},
listeners:
{
load: {
element: 'el',
fn: function() {
this.parent().unmask();
}
},
render: function() {
this.up('tabpanel').body.mask('Loading...');
}
},
closable: true
}
]
});



maybe "this.parent().unmask();" and "this.up('tabpanel').body.mask('Loading...')"
aren't referred to the same element?

alessio77
8 Jun 2012, 2:39 AM
mmm the load event doesn't exist in this context
the mask disappears becouse the pdf overlap it, but the load event never fire and the mask is yet there (under the pdf) :-(
i need to intercept the moment when the pdf if completely loaded? is possible?
can i pass a callback or an event to the:
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%;',
src: '\resources\myFile.pdf',
load: function(){ } //<-------- something similar