Ext JS LoadMask无法覆盖整个目标

wvt8vs2t 于 2022-09-26 发布在其他

关注(0)|答案(2)|浏览(177)

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

如果网格有locked列，LoadMask不能覆盖整个网格，有人能帮我解决这个问题吗？
如果网格没有锁定列，则一切正常，但一旦将任何列设置为locked，就会发生此错误。
以下是演示：https://fiddle.sencha.com/#view/editor&fiddle/3kr3
谢谢

extjs

来源：https://stackoverflow.com/questions/73231389/ext-js-loadmask-doest-cover-the-whole-target

2条答案

按热度按时间

busg9geu1#

这是框架故意做的（不知道为什么）。检查Ext.grid.locking.Lockable中的afterInjectLockable方法。它是这样的：

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;
},

您可以看到maskElement设置为“scrollContainer”。您可以创建覆盖，将其设置回“el”。
类似这样：

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

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

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/3krr

赞(0）回复(0）举报 2022-09-26

kqqjbcuj2#

试试这个：

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

});
var myMask=新Ext.LoadMask（{msg:'请稍候…'，target:myPanel}）；

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

希望这对你有帮助。

赞(0）回复(0）举报 2022-09-26

我来回答

Ext JS LoadMask无法覆盖整个目标

2条答案

相关问题

热门标签

最新问答