PDA

View Full Version : loadMask doesn't show while rendering a Window



lsaffre
18 Feb 2011, 12:24 PM
I have a Grid that opens a Detail window when the user doubleclicks a row.
Since complex Detail windows take some time to render,
I'd like to activate the loadMask of the Grid during this time.

Here is a showcase that demonstrates how I think this should be done.
But (and this is my problem) the loadMask becomes visible only when I open an alert box
before calling the detail window.
Who knows how I can have the loadMask become visible *without* opening an alert box?

To run the showcase:
http://lino.googlecode.com/hg/extjs-showcases/21.html

To see the source code:
http://code.google.com/p/lino/source/browse/extjs-showcases/21.html

arthurakay
18 Feb 2011, 12:58 PM
Try hiding the load mask after the window has rendered.

Your code:

function show_detail(grid) {
var win = new Ext.Window({
layout: "fit", width: 400, height:400,
title: "Detail",
items: new Ext.FormPanel({
layout: 'fit',
items: new Ext.form.DisplayField({
html:"This is a detail window which took 2 seconds to render."
})
})
});
// emulate a complex form that needs some time for rendering:
sleep(1000);
win.show()
}

var do_alert = new Ext.form.Checkbox({boxLabel:'show alert box before opening detail',value:false,width:"20em"});

function onDoubleClick(grid) {
grid.loadMask.show();
if (do_alert.getValue())
alert("This alert box is (currently) needed for the loadMask to become visible. Who knows why?");
show_detail(grid);
grid.loadMask.hide();
}

What I might suggest:


function show_detail(grid) {
var win = new Ext.Window({
layout: "fit", width: 400, height:400,
title: "Detail",
items: new Ext.FormPanel({
layout: 'fit',
items: new Ext.form.DisplayField({
html:"This is a detail window which took 2 seconds to render."
})
}),
listeners: {
'afterrender': function(thisComponent) {
grid.loadMask.hide();
}
}
});
// emulate a complex form that needs some time for rendering:
sleep(1000);
win.show()
}

var do_alert = new Ext.form.Checkbox({boxLabel:'show alert box before opening detail',value:false,width:"20em"});

function onDoubleClick(grid) {
grid.loadMask.show();
if (do_alert.getValue())
alert("This alert box is (currently) needed for the loadMask to become visible. Who knows why?");
show_detail(grid);
}


In other words, you're currently hiding the load mask before the window has physically rendered.

lsaffre
19 Feb 2011, 12:21 AM
Thank you, Arthur.
I tried it:
http://lino.googlecode.com/hg/extjs-showcases/21a.html

But sorry, that didn't work either.

softm
19 Feb 2011, 1:16 AM
it shows loadmask after window is created...
http://infosite.org.ua/ext/grid_loadmask.php

Seems, this mask needs to be rewritten, to have event "afterload", so first your show it, then from this even handler it start create af window ...

lsaffre
19 Feb 2011, 2:28 AM
Can you post some code snippets?
It sounds promising, but I never used lightboxes and iframes and a code snippet would maybe save me a lot of time.

softm
19 Feb 2011, 2:52 AM
Snippet is problem, am using complex JS structure, from now 6 files ... for a grid. So it will be not informative att all.

take look at fancybox.

Invoce as $.fancybox({ with type: 'iframe' ...

I use jquery adapter for this, it is very usefull

So click
show popup with fancy
there load first page
in it make lcaqtion.hre to second, long loading

To process click:



listeners:
{

'cellclick':{



fn: function ( grid_, row_, col_, e_ ) {



PS. Take look here ... (http://softm.org.ua/vtoraya-nereshenka-za-den/)
Link with word (Example).
SO same can be done with "loading" window, i think.

Even if use resized fancy, it will be looking better...

lsaffre
23 Feb 2011, 6:43 PM
Hm... so you are mixing jQuery and ExtJS. Sounds complicated.
I hope and believe that there is a simpler way to solve this.
Why does the alert() box cause the loadMask to be rendered?
Maybe I should switch to ExtJS 4 first?

softm
23 Feb 2011, 11:08 PM
Maybe your is searching answer - not a way to solve the _problem_.
Am also interesting in it, butt seems that ext team is not interested show answer - only for money :)
Have same - unsolved problems, i unserstood your ... cant resolve this.

PS. Here is adapter to jquery ... included in ext inside. For some purpose, how do your think :) ?

Condor
23 Feb 2011, 11:40 PM
Javascript is single threaded and some browsers won't update the screen while the thread is running.

This means that if you show a mask and then continue with heavy processing, it will show the mask AFTER the processing is done.

You need to give the browser a little time to show the mask, e.g.

loadMask.show();
(function(){
// do stuff
loadMask.hide();
}).defer(10);

softm
24 Feb 2011, 12:15 AM
Yes, this resolves a problem...
good lesson, thanks.