extjs - 渲染时如何在面板中居中遮罩

Question

我有一个简单的场景，其中面板在加载内容时需要一个蒙面的加载指示器。我使用以下代码使掩码工作正常，但第一次调用时加载指示器出现在顶部。在显示面板后调用它时，即。在按钮事件上，掩码正确显示在面板的中心。有任何想法吗？

var pnl = new Ext.Panel({
    title: 'test',
    width: 500,
    height: 500,
    renderTo: 'controls',
    listeners: {
        render: function(comp) {
            comp.load();
        }
    },
    load: function() {
       this.el.mask('loading...', 'loadingMask');
    }
});

Answer 1

似乎在完全呈现 html 之前，掩码已应用于面板。一个简单的解决方案是在应用前不久延迟遮罩。

render: function(comp) {
    setTimeout(function() { comp.loadPermissions(); }, 100);
}

Answer 2

只需从“渲染”侦听器中调用 this.el.mask() 即可。在 this.load 方法中调用掩码之前还要检查 this.rendered 属性。