5

How can I add a loadmask within the launch method of the Ext.applcation to the viewport that will also covers floating components like windows when get showed?

Currently the mask work but does not cover any opened window.

JJR
  • 773
  • 2
  • 13
  • 32

3 Answers3

3

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

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

I made a test, it works for me.

Christoph
  • 1,023
  • 11
  • 23
  • This seems to be what I am looking for. Only the solution seems a bit dirty... But I will give it a try – JJR Jul 16 '13 at 11:26
  • Yes this seems to work but I guess I asked it wrong. I need a loadmask. but I will give you +1 because it work and you waited long for this reply ;) – JJR Sep 27 '13 at 06:23
1

You can create custom loader that will hide itself when everything is loaded...

1.Create html holder in body:

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


2. Add css to properly position 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 js function outside 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 hidePreloader method when all components and tasks are completed and ready, in your case after app.js launch method is fininshed loading, for example:

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

here is a example in fiddle.

Davor Zubak
  • 4,726
  • 13
  • 59
  • 94
  • Thanks for this answer. Even this is not what I am exactly asking for it is something that I definitely need so got my +1 But the example ends in a 404 – JJR Jul 16 '13 at 11:24
1

I preferred my solution with CSS:

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

since window z-index is 19001, so 20000 is not bad.

Ratha
  • 11
  • 1
  • 1