Ext.ux.Deferred provides promises for ExtJS and Sencha Touch.
It allows to manage async functions with ease.
Ext.ux.Deferred follows the PromisesA/+ standard
The first problem is with the Pyramid of Doom, namely nested asynchronous functions, like this:
aSync1(10, function (val1) {
aSync2(val1, function (val2) {
aSync3(val2, function (val3) {
alert('Top of the pyramid with: ', val3);
});
});
});What we want here is to have a comfortable way to chain those asynchronous functions. With Ext.ux.Deferred it will be rewritten as follows:
aSync1(10)
.then(aSync2, onErr)
.then(aSync3, onErr)
.then(function (val3) {
alert('End of the queue with: ', val3);
}, onErr);Each result is given as an argument to the next async function on the chain path.
The second problem is make a function start after the execution of a set of asynchronous functions.
Take the above functions as example: now, we want to start the last anonymous function at the end of their execution: Ext.ux.Deferred has a static method, called when, that allows you to do that! Get the following example:
Ext.ux.Deferred
.when(aSync1, aSync2, aSync3)
.then(function (results) {
console.log('aSync1 result', results[0]);
console.log('aSync2 result', results[1]);
console.log('aSync3 result', results[2]);
}, function (errors) {
console.log('aSync1 error', errors[0]);
console.log('aSync2 error', errors[1]);
console.log('aSync3 error', errors[2]);
});Ext.ux.Deferred can be used to defer asynchronous processes.
The first thing to do is to make a new deferred:
function aSync1 (val) {
var dfd = Ext.create('Ext.ux.Deferred') ,
task = setInterval(function () {
// here your async task
clearInterval(task);
}, 1000);
return dfd.promise();
}Then, use the resolve/reject method to tell your promise what to do:
function aSync1 (val) {
var dfd = Ext.create('Ext.ux.Deferred') ,
task = setInterval(function () {
if (ipoteticalCounter > IPOTETICAL_VALUE) dfd.resolve(data);
else dfd.reject(data);
clearInterval(task);
}, 1000);
return dfd.promise();
}Now, you are ready to use your deferred by handling the result! The first method, then, accepts two args: the first one is the success callback, while the second one is the fail callback:
var promise = aSync1(10);
promise.then(function (result) {
alert('The promise has been solved with: ', result);
}, function (error) {
alert('The promise has been rejected with: ', error);
});Otherwise, it can be used the success-failure approach:
var promise = aSync1(10);
promise
.success(function (result) {
alert('The promise has been solved with: ', result);
})
.failure(function (error) {
alert('The promise has been rejected with: ', error);
});Or by the alias done-fail:
var promise = aSync1(10);
promise
.done(function (result) {
alert('The promise has been solved with: ', result);
})
.fail(function (error) {
alert('The promise has been rejected with: ', error);
});First of all, install Bower.
Then install Ext.ux.Deferred:
$ bower install ext.ux.deferredNow, you got the extension at the following path: YOUR_PROJECT_PATH/bower_components/ext.ux.deferred/
It contains the src folder that is the source folder, containing Deferred.js and Promise.js files.
Let's setup the Ext.Loader to require the right file:
Ext.Loader.setConfig({
enabled: true ,
paths: {
'Ext.ux.Deferred': 'bower_components/ext.ux.deferred/src/Deferred.js',
'Ext.ux.Promise': 'bower_components/ext.ux.deffered/src/Promise.js'
}
});
Ext.require(['Ext.ux.Deferred']);