Ext JS LoadMask does't cover the whole target

Question

const store = Ext.create('Ext.data.Store', {
    data: [{
        firstname: "Michael",
        lastname: "Scott"
    }, {
        firstname: "Dwight",
        lastname: "Schrute"
    }, {
        firstname: "Jim",
        lastname: "Halpert"
    }, {
        firstname: "Kevin",
        lastname: "Malone"
    }, {
        firstname: "Angela",
        lastname: "Martin"
    }]
});

const grid = Ext.create('Ext.grid.Panel', {
    title: 'Action Column Demo',
    store: store,
    columns: [{
        text: 'First Name',
        dataIndex: 'firstname',
        width: 150,
        locked: true, // locked column will trigger the LoadMask bug.
    }, {
        text: 'Last Name',
        dataIndex: 'lastname',
        width: 200,
    }, ],
    width: 300,
    renderTo: Ext.getBody()
});

new Ext.LoadMask({
    target: grid,
}).show();

If grid has locked column, LoadMask does't cover the whole grid, some one can help me to fix this issue?

If the grid has no locked column, everything is ok, but once to set any column to locked, this bug will happen.

Here is the demo: https://fiddle.sencha.com/#view/editor&fiddle/3kr3

Thanks!

Answer 1

This is done on purpose by the framework (not sure why). Check the afterInjectLockable method in Ext.grid.locking.Lockable. It goes like this:

 afterInjectLockable: function() {
    var me = this;

    // Here we should set the maskElement to scrollContainer so the loadMask cover both views
    // but not the headers and grid title bar.
    me.maskElement = 'scrollContainer';

    if (me.disableOnRender) {
        me.on('afterrender', function() {
            me.unmask();
        }, { single: true });
    }

    delete me.lockedGrid.$initParent;
    delete me.normalGrid.$initParent;
},

You can see that maskElement is set to "scrollContainer". You could create an override to set it back to "el".

Something like this:

Ext.define(null, {
    override: 'Ext.grid.locking.Lockable',

    afterInjectLockable: function () {
        this.callParent(arguments);
        this.maskElement = 'el';
    },
});

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3krr

Answer 2

Try this :

var myPanel = new Ext.panel.Panel({
renderTo : document.body,
height   : 100,
width    : 200,
title    : 'Foo'

});

var myMask = new Ext.LoadMask({ msg : 'Please wait...', target : myPanel });

myMask.show();
myMask.stop();

Hope this is helpful for you.