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

Question

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 1

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.