Использование Ext.util.TaskRunner для отображения часов в маске загрузки

Использование ExtJS 5.1.0.

Не могу придумать другого способа сделать это, но мне нужен таймер для отображения в маске загрузки в ожидании ответа Ajax. На successЯ бы тогда сбросил маску и уничтожил таймер.

Код отлично работает без Ext.util.TaskRunnerпоэтому моя модификация должна была сделать следующее:

    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);
        }
    });

На success он "делает что-то", но теперь он не разрушает таймер, и теперь он не удаляет маску (это подтверждается, так как я получаю ошибку, которая: TypeError: Ext.util.TaskRunner.destroy is not a function. (In 'Ext.util.TaskRunner.destroy(task)', 'Ext.util.TaskRunner.destroy' is undefined)...

Я понимаю, что TaskRunner будет продолжать работать до тех пор, пока он не будет уничтожен или остановлен, но, похоже, он работает не так, как хотелось бы.

В конечном итоге мне нужно выполнить задачу в течение жизненного цикла вызова Ajax, и я понимаю, что вызываю LoadMask несколько раз, чтобы достичь того, что мне нужно.

---- РЕДАКТИРОВАТЬ ----

Понял, частично: мне не хватало repeat параметр конфигурации (я пробовал repeat параметр до, без использования interval Параметр, и это не сработало, но их сочетание - именно то, что нужно, чтобы заставить это работать. Doh! Вы думаете, что они привели бы этот простой вариант использования в качестве примера в документации, но увы...):

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
    });

И с этим мне не нужно было выдавать stop или же destroy на объекте.

Однако часы не обновляются должным образом, что имеет смысл, поскольку задача запускается только один раз. Итак, похоже, я все еще застрял.

1 ответ

Решение

Понял, наконец-то!

Вот конфигурация, которая работала:

    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();

И тогда простой task.stop(); остановил задачу, как только произошел успешный обратный вызов. Отсутствующий ключ, по-видимому, определяет NewTask. Интересно. Думаю, это помогает более внимательно прочитать примеры в документации Sencha.

Другие вопросы по тегам