使用 Ext.util.TaskRunner 在加载掩码中显示时钟
Using Ext.util.TaskRunner to display a clock in a load mask
使用 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
上它是 "doing stuff," 但它现在没有破坏计时器,现在它没有移除面具(这是确认的,因为我收到一个错误: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
。
但是,时钟没有按预期更新,这是有道理的,因为任务只有 运行s 一次。所以,看起来我仍然被困住了。
终于明白了!
这是有效的配置:
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 文档中的示例。
使用 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
上它是 "doing stuff," 但它现在没有破坏计时器,现在它没有移除面具(这是确认的,因为我收到一个错误: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
。
但是,时钟没有按预期更新,这是有道理的,因为任务只有 运行s 一次。所以,看起来我仍然被困住了。
终于明白了!
这是有效的配置:
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 文档中的示例。