Extjs Sencha触控面罩不闭合

我正在创建一个包含onDisclosure事件的列表。当我单击onDisclosure图标时，我会执行以下操作：

    this.getMain().push({
        xtype: 'newpanel',
        title: record.info(),
        data: record.getData()
    });

但由于“newpanel”非常大，它需要6/7秒来显示面板

因此，我尝试添加如下面具：

        Ext.Viewport.setMasked({
        xtype: 'loadmask',
        message: 'Loading...'
    });


    this.getMain().push({
        xtype: 'newpanel',
        title: record.info(),
        data: record.getData()
    });



    Ext.Viewport.setMasked(false); 

Ext.Viewport.setMasked({
    xtype: 'loadmask',
    message: 'Loading...'
});

var me = this;
setTimeout(function() {
    me.getMain().push({
        xtype: 'newpanel',
        title: record.info(),
        data: record.getData()
    });

    Ext.Viewport.setMasked(false); 
}, 100); // 100ms should be enough for rendering a loading mask

但是由于Javascript是异步的，这些代码行不会按指定的顺序运行。首先他按下新面板，然后我们等待6/7秒，然后他将掩码设置为true，并立即设置为false，这样我们就看不到掩码

有人对如何解决这种情况有什么想法吗

---

谢谢。

那个面板能有多大？我见过巨大的组件合成几乎是瞬间渲染的。

newpanel

实现中很可能存在问题，例如在循环中多次渲染或其他操作。您应该检查代码以消除这种情况

至于你问的问题。。。在Javascript线程被密集的代码冻结之前，必须给Ext一些时间来呈现掩码。为此，您需要延迟创建面板，如下所示：

        Ext.Viewport.setMasked({
        xtype: 'loadmask',
        message: 'Loading...'
    });


    this.getMain().push({
        xtype: 'newpanel',
        title: record.info(),
        data: record.getData()
    });



    Ext.Viewport.setMasked(false); 

Ext.Viewport.setMasked({
    xtype: 'loadmask',
    message: 'Loading...'
});

var me = this;
setTimeout(function() {
    me.getMain().push({
        xtype: 'newpanel',
        title: record.info(),
        data: record.getData()
    });

    Ext.Viewport.setMasked(false); 
}, 100); // 100ms should be enough for rendering a loading mask

不幸的是，即使这会使遮罩变得可见，UI仍然会冻结，动画GIF（例如加载图标）也会冻结

为了避免这种情况，您需要在一个单独的线程中运行密集型代码，也就是说生成一个线程。但我认为它甚至不可能从一个工作者那里呈现Ext组件

---

所以，在最后一种手段中，您可以在您的大面板中重复我的示例中使用的延迟策略。如果您可以识别一些可以在其中隔离的密集代码块，那么通过将它们的执行延迟几毫秒，您就可以腾出一些处理UI事件、设置GIF动画等的时间。

谢谢您的回答，rixo！我的新面板不仅仅是一个面板，而是一个包含6个选项卡的选项卡，调用6个新面板。我尝试了您提到的实现，但是当我执行“this.getMain（）.push”时，我得到了以下错误：“uncaughttypeerror:Object[Object global]没有方法‘getMain’”，因为超时函数内的“this”与超时函数外的“this”不同。我试图使用“this.getParent（）”或“this.up（）”，但没有效果…你是对的，对不起。我使用闭包修复了这个示例。或者，您可以使用

Ext.Function.defer

来管理范围，而不是

setTimeout

。是的，我想我的大脑被冻结了，当然我必须这么做！非常感谢你，现在很完美！