View Full Version : Loading mask of form panel on window does not work

1 Apr 2012, 10:43 PM
This JSFiddle describes my problem exactly: http://jsfiddle.net/4Z2Z2/

So I have a window, with a Ext.form.Panel on it. Now this form gets populated with AJAX data values, so in the meanwhile I want the window (or the form, both don't work) to show the loading mask. But as you can see, the loading mask is hidden behind the window - just drag it somewhere and you'll see the loading mask.

What is there to do about this?

2 Apr 2012, 10:00 AM
See if this works in fiddle as you expected:

Ext.onReady(function() {
var win = new Ext.window.Window({
title: 'win',
width: 300,
height: 300,
focusOnToFront: false
//Ext.getBody().mask(); // to mask body


15 Apr 2012, 11:21 PM
Thanks Scott, that did eventually the trick.

Although, there's a problem. I've attached a store to implement the form's load() action. When the window is loaded for the first time, the loading mask does not appear. However, when I save the form - and implicitly load() the store after a successful save - the loading mask does appear.

What is going wrong?

16 Apr 2012, 4:01 AM
This always works for me:

Add waitMsgTarget: true to your Form Panel's configuration.
Add waitMsg: 'Loading...' in your call to form.load():

url: 'formLoadURL',
params: {
uniqueId: entityIdToBeLoaded
waitMsg: 'Loading...',
success: function(basicForm, action) {
// todo
failure: function(basicForm, action) {
// todo

17 Apr 2012, 12:11 AM
Hi friend, that does indeed work too, although it's using a different loading mask.

In the end I found out that I applied the 'focusOnToFront: false' to the form panel, instead of to the window, stupid me.

Thanks all for the help!