How to handle LoadMask effectively?

How to use Ext.LoadMask component for a stateless web application?

I found an issue where loadMask z-index DIV element conflicted with modal window object z-index DIV element.
loadmask component created for different target views for each screen and hidden but not destroyed.
I spend good time to investigate issue in my application code.
Version: EXT 4.2.0
Chrome - Browser

Issues:
var myMask = new Ext.LoadMask(mypanel , {msg:"Loading..."});
myMask.hide();
// Why myMask.hide(); simply destroy LoadMask instance, here DOM still exist in browser with style "visibility: hidden"
Like this for more DIV element with this style are added to DOM.

To work on my fix, I still see 'x-mask' element exist in dom even when my target view is destroyed.
I want to understand difference between Ext.getBody().mask() /unmask() and
var maskobj = new Ext.LoadMask({
msg: message,
hideMode: 'display',
target: targetComponent
} );
maskobj.show();

Example:
If I have 2 async calls, fired in parallel in same screen.
First async call has target component as Ext.body()
second async call has target component as Ext.Panel
what is best way of add mask element and destroy() /unmask it

Method1:
Ext.getBody().mask('Loading..');
call Async function (); here
Ext.getBody().unmask(); // this line used inside async success callback()

Method2:
var mypanel = Ext.create('Ext.Panel', { });
var myMask = new Ext.LoadMask(mypanel , {msg:"Loading..."});
myMask.show();
call Async function(); here
onsuccess: function(){
myMask.destroy();
}
-------------------------------------------------------------------------------------
Sencha support team replied as,
A loadmask element will never be deleted if you manually create one (as you have done above). You must manually destroy it when no longer required. maskobj.hide() will still keep the underlying div around for future use. The loadmask
will be automatically destroyed when the target component is destroyed as well.

Actually both should be removing the mask. I do notice you are using a fairly old version of Ext and that beginning with Ext 4.2.2 the panel itself has a functioning mask/unmask method as well (just like the body) which will automatically create and destroy the mask when these methods are called.

Solution -1:
Use mask() , unmask() applied on body
Ext.getBody().mask('Loading...');
Ext.getBody().unmask();

unmask() will destroy() masking DOM element from body by default.

Solution-2:
Example:
Ext.define('MyApp.util.LoadMaskUtil', {

     /* set instance of loadmask object when created and loadmask.show() called,
        we can destroy loadmask instance when loadmask is hidden */
    loadmasking : null,

    statics : {
        /* method accepts custom status message to display when masked
        * @param {component} targetComponent
        * @param {String} customMsg , to display msg when masked
        */
        loadMask : function(targetComponent,customMsg) {
            var message =  'Please wait...';
            if (!Ext.isEmpty(customMsg) && Ext.isString(customMsg)) {
                message = customMsg;
            }

            var maskObj = new Ext.LoadMask({
                msg: message,
                hideMode: 'display',
                target: targetComponent,
                listeners: {
                    beforedestroy: function(lmask) {
                        console.log('beforedestroy',lmask.id);
                    },
                    hide: function(lmask) {                      
                        console.log('hide',lmask);
                    }
                }
            });
                   
            return maskObj;
        },

        /* method accepts custom status message to display when masked
         * @param {component} targetComponent
         * @param {String} customMsg , to display msg when masked
         */
        showLoadMask : function(targetComponent,message) {
            this.loadmasking = this.loadMask(targetComponent,message);
            this.loadmasking.show();          
        },

        /* method to unmask on target element */
        hideLoadMask : function(targetComponent) {
            /* when targetComponent not passed or undefined, remove masking object */
            if(this.loadmasking){
                console.log('hide',this.loadmasking);
                this.loadmasking.destroy();

            }
         
        }
}
});

// call loadmask
fnShowLoadMask : function(){



 var mypanel =  Ext.create('Ext.panel.Panel', {
        title : 'LoadMask with Ajax call ',
        renderTo: 'example-grid',
        width: 500,
        height: 280,
        items : [
        {
            xtype:'button',
            text : 'Make ajax call',
            handler(){
 
       MyApp.util.LoadMaskUtil.showLoadMask(mypanel);              
         Ext.defer(function() {
            Ext.Ajax.request({
                        url: '/echo/js/?delay=5&js=',
                        method: 'GET',        
                        async: false
                    });
                    MyApp.util.LoadMaskUtil.hideLoadMask();

        }, 5000);

             
            }
          }]
     
    });


}