Unexplained load mask in upper left corner of browser again

[ykey]

Evant please test the following test case against your fix in 4.1 if you have not already.

Given you have a different grid in different tabs of the same tab panel
And the inactive grid's store take several seconds to load
When the inactive grid tab becomes active before its store has finished loading
Then the load mask for that grid should become visible.

(Basically make sure the load mask you are not showing initially becomes visible if its component is activated before its data is completely loaded).

Thanks.

[nkezhaya]

I've also been experiencing this issue, but the fix provided definitely works for me:

Ext.override(Ext.view.AbstractView, {
    onMaskBeforeShow: function() {
        if(!this.el.isVisible(true)) {
            return false;
        }


        this.callOverridden(arguments);
    }
});

Hope to remove all these LoadMask-related overrides in 4.1!

[rhamflett]

Thought I'd share my discoveries here in case it's useful for someone. I'm creating an Ext.LoadMask directly (no store involved at all). Depending on what the user is doing, the target may no longer be visible, and I found that the posted workaround (overriding part of AbstractView) didn't work for me. Here's an example of what seems to be working for me in case anyone finds it useful.

showMask = function () {
    var target = Ext.ComponentQuery.query('#tab2')[0];
    var mask = new Ext.LoadMask(target, {
        msg: 'Hello',
        listeners: {
            beforeshow: function () {
                if (this.ownerCt) {
                    return this.ownerCt.isVisible();
                } else if (this.container) {
                    return this.container.isVisible();    
                } else {
                    return true;
                }
                
            }
        }
    });
    mask.show();
};

[ykey]

Is anyone else seeing a regression with this defect in 4.1.1?

[J D]

yes me. I have the problem that the loadmask is outside of the region from the panel.

[ldonofrio]

use this

Ext
.define('Ext.bugs.view.AbstractView', {

    override: 'Ext.view.AbstractView',

    onMaskBeforeShow: function() {

        var me = this;

        if (!me.el.isVisible(true)) return false;

        me.callParent(arguments);

    }

}); 

[J D]

this patch is not solving my problem. If the panel is empty because the template code is still not loaded the loadmask is displayed outside of the region. See attached screen-shot. After the first load of content inside of the panel the loadmask is inside of the region/panel.
P5-loadmask-1.jpg

[yoann.colleaux]

This bug does not seem to be resolved.
Same issue with 4.1.3

[ykey]

I am still having problems with load masks appearing in the top left corner of my app or moving when I scroll a container in 4.1.1a and it doesn't sound like it has been fixed in 4.1.3. Are the developers aware of any issues related to load masks. Would it help if I created new bug reports?

[Gareth Smith]

I believe I am having this issue too: the loading message appears in the top-left corner instead of over the correct component when setLoading(true) is called on a component before the component becomes visible.

I am using version 4.1.1.1.

This override class provides a workaround, although it is probably not a complete fix and might have unintended side effects:

Ext.define('patch.LoadMask', {
    override: 'Ext.LoadMask',

    onContainerShow: function(container){
        this.callOverridden(arguments);
        if (this.getMaskTarget().isVisible()) {
            this.sizeMask();
        }
    },

    onContainerExpand: function(container){
        this.callOverridden(arguments);
        if (this.getMaskTarget().isVisible()) {
            this.sizeMask();
        }
    }

});