PDA

View Full Version : defer function scope



raj_plays
4 Oct 2012, 10:30 PM
Hi,
I want to show a load mask in my window for 2 seconds after the window is rendered and before the image in it gets loaded.
To do so, I use the defer function.
The problem is that the mask appears on the whole page instead of the window only.
Please help..


var imgWindow = new Ext.Window({
closable: true,
width: 300,
height: 300,
x: 100,
y: 100,
plain: true,
layout: 'fit',
items: [{
xtype: 'box',
autoEl: {
tag: 'img',
src: 'http://localhost:1303/Biz/images/img1.jpg'
}
}]
});


imgWindow.show();

var imgWindowMask = new Ext.LoadMask(imgWindow.getEl(), {
msg: 'Loading...',
removeMask: true
});
imgWindowMask.show();
(function () {
imgWindowMask.hide()
}).defer(2000, Ext.Window);

mitchellsimoens
15 Oct 2012, 8:50 AM
You need to mask it after it has been rendered and positioned/sized

raj_plays
17 Oct 2012, 5:52 AM
Thank you, Mitchell.
You mean I should instantiate LoadMask on 'render' of the window?
I thought instantiating after window.show() would be good enough. No?

mitchellsimoens
17 Oct 2012, 6:38 AM
Right after show or even right after rendering may not be a perfect place as the window may still be getting laid out so it's rendered just not sized properly.

raj_plays
19 Oct 2012, 3:08 AM
Then how do you suggest I go about it?

willigogs
22 Oct 2012, 3:03 AM
Something like this:


var imgWindow = new Ext.Window({
title: 'Yo',
height: 300,
width: 600,
html: 'Hello',
listeners: {
show: function (win) {
win.getEl().mask('Loading...', 'x-mask-loading')
setTimeout(function () {
win.getEl().unmask()
}, 2000)
}
}
}).show();