Sencha Touch面膜揭秘

Question

我正在创建一个包含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); 

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

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

谢谢。

Answer 1

那块面板能有多大？我已经看到了巨大的组件组合几乎是瞬间呈现的。您的newpanel实现很可能存在问题，比如在循环中多次呈现之类的问题。您应该检查您的代码以消除这种情况。

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

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也是如此(例如加载图标)。

为了避免这种情况，您需要在单独的线程中运行密集的代码，也就是通过产生一个WebWorker。但我不认为从worker渲染Ext组件是可能的……

因此，在最后的办法中，您可以在您的大面板中重复我的示例中使用的延迟策略。