horcle_buzz horcle_buzz - 3 months ago 24
Ajax Question

Using Ext.util.TaskRunner to display a clock in a load mask

Using ExtJS 5.1.0.

Couldn't really think of any other way to do this, but I need a timer to show in a load mask while awaiting an Ajax response. On

success
, I then would unset mask and destroy the timer.

The code works fine without the
Ext.util.TaskRunner
, so my modification was to do the following:

task = runner.start({
run: function () {
// show loadMask during request
Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
},
interval: 10
});

// payload for POST
obj = {
query: {
payload: atom
}
};

Ext.Ajax.request({
cors: true,
timeout: 600000, //default is 30 seconds
useDefaultXhrHeader: false,
url: url,
jsonData: obj,
headers: {
'Accept': 'application/json'
},
disableCaching: false,

success: function(response) {
// do stuff

// stop loadMask
Ext.getBody().unmask();
Ext.util.TaskRunner.destroy(task);
}
});


On
success
it is "doing stuff," but it is now not destroying the timer and now is it not removing the mask (this is confirmed, since I'm getting an error that:
TypeError: Ext.util.TaskRunner.destroy is not a function. (In 'Ext.util.TaskRunner.destroy(task)', 'Ext.util.TaskRunner.destroy' is undefined)
...

I realize that the
TaskRunner
will continue to run until it's either destroyed or stopped, but this does not seem to be working as desired.

I need ultimately to execute the task during the life cycle of the Ajax call, and I realize that I am calling the
LoadMask
multiple times to achieve what I need.

---- EDIT ----

Got it, partially: I was missing the
repeat
config parameter (I had tried the
repeat
parameter before, without use of the
interval
parameter, and it didn't work, but the combination of these is exactly what was needed to get this to work. Doh! You think they would have given this simple use case as an example in the documentation, but alas...):

task = runner.start({
run: function () {
// show loadMask during request
Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
},
interval: 10,
repeat: 1
});


And with that, I did not need to issue a
stop
or
destroy
on the object.

However, the clock is not updating as desired, which makes sense, since the task only runs once. So, looks like I am still stuck.

Answer

Got it, finally!

Here is the configuration that worked:

    var task, runner = new Ext.util.TaskRunner();

    task = runner.newTask({
        run:  function () {
            // show loadMask during request
            Ext.getBody().mask("Computing..." + Ext.Date.format(new Date(), 'g:i:s A'));
        },
        interval: 10000
    });

    task.start();

And then a simple task.stop(); stopped the task once success callback happened. The missing key appears to be defining a NewTask. Interesting. Guess it helps to read the examples in the Sencha Documentation more carefully.