Apply a mask to Viewport, which also covers floating components

Question

How to add a boot mask to the Ext.applcation startup method in a viewport that will also cover floating components like windows when it is shown?

Currently the mask works, but does not apply to any open window.

Answer 1

I found the answer here , the trick is to increase the z-order of the mask:

Ext.getBody().mask().dom.style.zIndex = '99999'; 

I did a test, it works for me.

Answer 2

You can create a custom bootloader that will hide when everything is loaded ...

1.Create an html holder in the body:

 <div id="loading-mask"></div> <div id="loading"> <span id="loading-message">Loading. Please wait...</span> </div> 

2. Add css to properly set the mask:

 #loading-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; z-index: 1; } #loading { position: absolute; top: 40%; left: 45%; z-index: 2; font-family: tahoma,arial,verdana,sans-serif; font-size: 12px; } #loading span { padding: 5px 30px; display: block; } 

3. Create a js function outside of the Ext.onReady call:

 function hidePreloader() { var loadingMask = Ext.get('loading-mask'); var loading = Ext.get('loading'); // Hide loading message loading.fadeOut({ duration: 0.2, remove: true }); // Hide loading mask loadingMask.setOpacity(0.9); loadingMask.shift({ xy: loading.getXY(), width: loading.getWidth(), height: loading.getHeight(), remove: true, duration: 1, opacity: 0.1, easing: 'bounceOut' }); } 

4. Call the hidePreloader method when all components and tasks are completed and ready, in your case, after the app.js start method is loaded, for example:

 listeners: { afterrender: function(form) { hidePreloader(); } } 

here is an example in a script.

Answer 3

I preferred my solution using CSS:

 body.x-masked .x-mask { z-index: 20000; } 

since the z-index is 19001, so 20,000 is not bad.