CODEWITHSUNDEEP
extjsgridloadmask
itsalongstory
itsalongstory

Reputation: 17

Ext JS LoadMask does't cover the whole target

enter image description here

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();

enter image description here

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!

Upvotes: 0

Views: 190

Answers (2)

scebotari66
scebotari66

Reputation: 3480

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

Upvotes: 1

Chmn
Chmn

Reputation: 11

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.

Upvotes: 0

Related Questions