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秒，然后他将面具设置为真，立即设置为假，所以我们看不到面具。

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

谢谢。

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。但我认为甚至不可能从工人那里渲染Ext组件......

因此，最后，您可以在大面板中重复我的示例中使用的延迟策略。如果你能识别出可以在那里隔离的密集代码块，那么通过将它们的执行推迟几毫秒，你可以腾出一些处理时间来处理UI事件，动画GIF等等。

Sencha Touch面具揭秘

1 个答案: