0

我正在创建一个带有 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 秒，然后他将遮罩设置为真并立即设置为假，因此我们看不到遮罩。

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

谢谢你。

4

1 回答 1

0

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

至于你问的问题......你必须给 Ext 一些时间来渲染掩码，然后 Javascript 线程被你的密集代码冻结。为此，您需要像这样推迟面板的创建：

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 等。

于 2013-05-27T15:37:18.777 回答