使用Ext.util.TaskRunner在加载掩码中显示时钟

时间:2016-08-26 18:38:51

标签: ajax extjs loadmask

使用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它正在“做东西”,但它现在没有破坏计时器,现在它没有删除掩码(这已经确认,因为我收到一个错误:{{1} } ...

我意识到TypeError: Ext.util.TaskRunner.destroy is not a function. (In 'Ext.util.TaskRunner.destroy(task)', 'Ext.util.TaskRunner.destroy' is undefined)将继续运行,直到它被破坏或停止,但这似乎并没有按预期工作。

我最终需要在Ajax调用的生命周期中执行任务,并且我意识到我多次调用TaskRunner来实现我所需要的。

----编辑----

部分得到了:我错过了LoadMask配置参数(我之前尝试过repeat参数,没有使用repeat参数,但它没有用,但是这些的组合恰好是让它工作所需要的。多哈!你认为他们会在文档中给出这个简单的用例作为例子,但是......):

interval

由此,我不需要在对象上发出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

然而,时钟没有按照需要更新,这是有道理的,因为任务只运行一次。所以,看起来我仍然被卡住了。

1 个答案:

答案 0 :(得分:0)

终于明白了!

以下是有效的配置:

    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文档中的示例。