JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://dev.sencha.com/deploy/ext-4.0.7-gpl/resources/css/ext-all.css">
<script src="http://dev.sencha.com/deploy/ext-4.0.7-gpl/ext-all-debug.js"></script>
JavaScript
Ext.onReady(function(){
var workerMethod = function() {
for (var i = 0; i < 999999999; ++i) {
var j = i*i*i*2;
}
};
var handler1 = function(sender) {
Ext.getBody().mask();
workerMethod();
Ext.getBody().unmask();
};
var handler2 = function(sender) {
Ext.getBody().mask();
Ext.defer(function() {
workerMethod();
Ext.getBody().unmask();
}, 10);
};
var handler3 = function(sender) {
Ext.getBody().mask();
var worker = new Worker('task.js');
worker.onmessage = function (event) {
Ext.getBody().unmask();
};
};
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
handler: handler1,
text: 'Go sync'
},
{
xtype: 'button',
handler: handler2,
text: 'Go async'
},
{
xtype: 'button',
handler: handler3,
text: 'Go worker'
}
]
});
});