Sencha触控面罩公开

我使用onDisclosure事件创建了一个列表。当我点击onDisclosure图标，我这样做：Sencha触控面罩公开

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

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

谢谢。

来源

2013-05-27 Anonymous

该面板有多大？我已经看到巨大的组件组合几乎是瞬间渲染的。您的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

不幸的是，即使这将使面膜变得可见，用户界面将仍然冻结，所以将GIF动画（如加载图标）。

为了避免这种情况，您需要在单独的线程中运行密集代码，即产生一个WebWorker。但我认为它甚至不可能从一名工作人员呈现Ext组件...

因此，在最后的手段中，您可以在您的大组中重复我的示例中使用的延迟策略。如果你可以识别一些密集的代码块，然后通过推迟几毫秒的执行，你可以释放一些处理时间来处理UI事件，动画GIF等。

来源

2013-05-27 15:37:18 rixo

感谢您的回答，rixo ！我的新面板不仅仅是一个面板，而是一个带有6个标签的Tabpabel，可调用6个新面板。我尝试过你提到的实现，但是当我做 “this.getMain（）。push” 我得到以下错误：“Uncaught TypeError：Object [object global] has no method'getMain'” 因为超时功能内的“this”与超时功能外的“this”不同。我试图使用“this.getParent（）”或“this.up（）”，但没有效果... – Anonymous

你说得对，对不起。我使用闭包修复了这个例子。或者，您可以使用'Ext.Function.defer'来管理范围，而不是'setTimeout'。 – rixo

是的，我认为我的大脑被冻结了，当然我必须这样做！非常感谢，现在完美！ – Anonymous

Sencha触控面罩公开

回答

相关问题