PDA

View Full Version : LoadMask does not hides in Google Chrome



MatteoSp
14 Dec 2010, 6:31 PM
I'm working with 3.3, my application use LoadMask the classic way:



var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
// do stuffs
myMask.hide();


works perfectly with IE (7 and 8) and FireFox (3.5 and above), but does not with Google Chrome: it simply does not hide. No way.

Any ideas?

thanks
m.

dstrr
20 Dec 2010, 1:41 AM
Hi!

I'm working in 3.2.0 and have the same issue.
Ext.LoadMask does not show "Loading..." message when .show() is called and does not disappear when .hide() is called.

Condor
20 Dec 2010, 2:04 AM
These are two issues.

1. Some browsers won't display the mask if your "do stuff" is a single block of javascript that will block the processor. For this I recommend using:

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
(function(){
// do stuff
myMask.hide();
}).defer(1);

2. That the mask doesn't disappear when calling hide() is new to me. Can you post an example?

dstrr
20 Dec 2010, 3:33 AM
Custom.RequestContainer = Ext.extend(Ext.util.Observable, {

constructor: function(config)
{
this.id = 'searchbox';
Ext.ComponentMgr.register(this);
Diskbitz.SearchBoxController.superclass.constructor.call(this);

this.processMask = new Ext.LoadMask(Ext.getBody(), { msg: "Searching..." });
},

runRequest: function(/*some args*/)
{
this.processMask.show();
Ext.Ajax.request({
url: '...', // some url
timeout: 60000,
method: 'GET',
scope: this,
success: function (response, opts) {
this.processMask.hide();
// process response
}
},
failure: function (response, opts) {
this.processMask.hide();
// process failure
},
params: {/*some params*/}
});
}

}

Condor
20 Dec 2010, 3:59 AM
This should work... And you are not getting any javascript errors?

dstrr
20 Dec 2010, 4:21 AM
Yep, no any errors in console.

It works in FF3, IE7, IE8, but breaks in Chrome 8...

I'll try this and let you know about results:


(function(){
// do stuff
myMask.hide();
}).defer(1);

dstrr
20 Dec 2010, 4:36 AM
Such wrap does not work :(

mschwartz
20 Dec 2010, 6:27 AM
Are you including any CSS files besides the ExtJS ones?

muppet
21 Dec 2010, 5:01 AM
I have the same problem here in 3.3.0.

Trying to hide the LoadMask doesn't seem to have any effect in Chrome. I can show it over the console, but not hide it anymore. In FF the same works fine over the console (show & hide).

Condor
21 Dec 2010, 5:18 AM
Which Chrome version? Not version 10 I hope (there's a regexp bug in both Ext and Chrome)?

muppet
21 Dec 2010, 6:28 AM
No, I'm using 8.0.552.224. :)

Condor
21 Dec 2010, 7:03 AM
In that case I'll need an example, because a quick test on my Chrome 8 doesn't who that problem.

muppet
21 Dec 2010, 7:48 AM
It seems that our language constructor is causing the problem. But I don't understand why. Since it's a multi-language interface, we get the description texts etc. from a language file/object.


Ext.ns('Bf');

Bf.Language = Ext.extend(Object,
{
noEntry: 'no entry',
get:function(index)
{
if(typeof this[index] != 'undefined')
{
return this[index];
}
else
{
return this['noEntry'];
}
}
})

var Language = new Bf.Language();The language files are set up like the following:

Bf.Language = Ext.extend(Bf.Language,{foo: 'bar'});

var Language = new Bf.Language();If I now only have the a simple load mask, that I show and try to hide afterwards over the console, it doesn't work in Chrome.

var loadMask = new Ext.LoadMask
(
Ext.getBody(),
{msg: 'i am a loadmask!'}
);

Condor
21 Dec 2010, 7:51 AM
1. You can't extend a class to itself:

Bf.Language = Ext.extend(Bf.Language,{foo: 'bar'});
I assume you want to override it instead:

Ext.override(Bf.Language,{foo: 'bar'});

2. Are you creating the loadMask inside Ext.onReady (you need to, because otherwise Ext.getBody() won't be valid).

3. And how are you using this loadMask?

Joshv
15 Apr 2011, 9:37 AM
I am having the same issue Ext 3.3.0 and Chrome 10.0.648.204. Works fine in FF 3, 4 and IE 8 but not in chrome. The mask will show but will NOT hide.

thienohs
20 Apr 2011, 12:35 AM
This issue is just comeback a few days ago.
Like Google Chrome has some update issue that doesn't work with loadMask in global.

thebapi
25 Apr 2011, 5:29 AM
Hello all.I also found the same problem.I didnt solve the problem but tell you what is happening.I am attaching a image.This snap i have taken after calling the loadMask.show() .where loadMask's definition is

var loadMask = new Ext.LoadMask(Ext.getBody(), {
msg : 'Please wait...',
removeMask : true
});

SabaSarwat
25 May 2011, 11:47 PM
I am also stuck in this issue. Can somebody suggest a solution please?

omermx
4 Jul 2011, 7:19 AM
Hi am also having this issue using Chrome version 12.0.742.100. Although the mask does work correctly in other parts of my app so not sure if this is an issue with Chrome or my code. More specifically it is the loadMask in a grid that is not hiding properly when I switch between pages using a PagingToolbar plugin. Here are some snippets of code:

The mask...


var recallMask = new Ext.LoadMask(Ext.getBody(), {
msg: "Loading Recall Data..."
});


The grid:


var recallGrid = new Ext.grid.GridPanel({
store: recallStore,
columnLines: true,
width: 915,
autoScroll: true,
loadMask: recallMask,
stripeRows: true,
// title:"Recall Batch Preview,
style: {
paddingTop: "5px"
}...
..});


I am using extjs 3.4.0. Any help appreciated!!!

hardik.akbari
24 Oct 2011, 1:10 AM
Hi Guys,

try this..

Ext.getBody().unmask();

this should work....


---

or in other case, try to use below code

to mask:
Ext.getBody().mask('Loading Text....', 'x-mask-loading');

to unmask:
Ext.getBody().unmask();

( worked for 3.x )


Cheers.
Hardik

SabaSarwat
24 Oct 2011, 4:25 AM
Thanks a lot hardik :) it worked for me.

Joshv
25 Oct 2011, 8:01 AM
Worked for me as well. Thanks.