[Solved] Prevent Interaction While Loading.

[cluettr]

When dynamically loading a grid with data I need to prevent the user from doing anything with the grid and other elements throughout the page. Is their a good way to do this?

[evant]

Could just mask the page



Ext.get(document.body).mask();

[cluettr]

Thanks evant!

Sometimes I drink and get really drunk but I swear I haven't had a single drink today : ) With that being said I have one more question for you...

Is it just a matter of either creating the loadMask object or adding the loadMask parameter to the configuration of the grid - OR - must one add the div containers and css to get it to work?

I saw this in the API docs source:


<div id="loading-mask" style="width:100%;height:100%;background:#c3daf9;position:absolute;z-index:20000;left:0;top:0;"> </div>
<div id="loading">
<div class="loading-indicator"><img src="../resources/images/default/grid/loading.gif" style="width:16px;height:16px;" align="absmiddle"> Loading...</div>
</div>

[evant]

If you just want to mask the grid, then use the loadMask parameter.

If you want to mask the whole page, use the code above. If you do that, you'll manually need to unmask it, using


Ext.get(document.body).unmask();

when the grid is loaded.

[cluettr]

You da' man... thanks!