LoadMask - no loading indicator shown

[dante]

When using LoadMask to mask a div while an ajax call, the masking works, but only to the extent that the div is grayed-out. Unfortunately there is no sort of loading-indicator shown. Have I just missed an image file while copying ressource files? Is it possible to show a loading indicator (animated gif) simultaneously, centered in the div?

Just to clarify, I am using the following method right before the ajax call:


Ext.get('east-div').mask();

How can I add an additional loading indicator here? Can someone please point me to a proper direction?

[BernardChhun]

there's no loading animation for the mask() function.

take a look at a solution I've posted on that matter :http://extjs.com/forum/showthread.php?t=8479&highlight=loading

[dante]

Thanks for replying.. your code surely helps, but what I basically want is just a simple function that takes a div ref as its parameter and then does the following things:

1. Mask the div
2. Determine top-x, topx-y, width and height of the div in order to calculate a centered position for a loading indicator (like one from ajaxload.info)
3. Display a loading indicator gif at the calculated coordinates

It would indeed be very smart if ext featured such a function as standard.. I will now try to write it myself, however, any help is appreciated. Primarily because I am not sure how to write it in good Ext-style.

[mystix]

It would indeed be very smart if ext featured such a function as standard.. I will now try to write it myself, however, any help is appreciated. Primarily because I am not sure how to write it in good Ext-style.

it already does. (see mask docs (http://extjs.com/deploy/ext/docs/output/Ext.Element.html#mask))


var theDiv = Ext.get('theDiv');
theDiv.mask('<== that there is the loading indicator... -_-"', 'x-mask-loading');

[dante]

Fine, meanwhile I discovered also this function, which does nearly perfectly what I want:



Ext.get('east-div').getUpdateManager().showLoading();


Maybe it is more elegant to use this one? The only drawback is that the loading indicator gets displayed in the upper left corner of the div instead of being centered. Can I easily change its position to centered? I'll be perfectly happy then :>

[mystix]

Can I easily change its position to centered? I'll be perfectly happy then :>

get the mask's Ext.Element and then call center (http://extjs.com/deploy/ext/docs/output/Ext.Element.html#center) on it.