在 ExtJS 5.1.3 中动态更改 TaskManager 间隔

Question

我有一个网格，我需要每 5 分钟更新一次。为此，我创建了一个 Ext.util.TaskManager 的实例，例如

var task = new Ext.util.TaskManager.start({
    run: function() {
        search();
    },
    interval: 1000 * 60 * 5
});

这完全符合预期。现在我还需要添加一个下拉菜单，用户可以在其中更改他们希望刷新的分钟数。范围为 1-5、10、15 分钟间隔。

为此，我添加了一个组合框、一个静态存储和一个分钟变量，并更改了上述任务管理器函数以包含分钟变量。

var autoRefreshStore = new Ext.data.SimpleStore({
    fields: ['value', 'text'],
    data: [
        [1, '1 min'],
        [2, '2 mins'],
        [3, '3 mins'],
        [5, '5 mins'],
        [10, '10 mins'],
        [15, '15 mins']
    ]
});

var autoRefreshIntervalInMins = 5;

//my combobox in a toolbar
{
           xtype: 'combobox',
           id: 'autoRefreshComboBox',
           fieldLabel: 'Auto Refresh Interval',
           displayField: 'text',
           valueField: 'value',
           store: autoRefreshStore,
           typeAhead: false,
           value: 5,
           editable: false,
           forceSelection: true,
           allowBlank: false,
           mode: 'local',
           width: 200,
           listeners: {
               afterrender: function(obj){
                   autoRefreshIntervalInMins = obj.getValue();
               },
               change: function(obj, newValue, oldValue, eOpts){
                   autoRefreshIntervalInMins = newValue;
               }
           }
}
var task = Ext.util.TaskManager.start({
    run: function(){
        search();
    },
    interval: 1000 * 60 * autoRefreshIntervalInMins
});

这个问题是无论我在下拉列表中更改间隔多少次——运行函数仅在 5 分钟后运行s——这是默认值我在 var autoRefreshIntervalInMins = 5; 中设置的 change 事件触发得很好，但任务间隔永远不会改变。我将如何做到这一点？

Answer 1

Try to use singleton class of ExtJS.

在单例 class中，您可以创建自己的函数并使用get或set方法动态更改。

我创建了一个演示希望它能帮助您解决问题。 Sencha Fiddle

Ext.define('InterVal', {
    singleton: true,
    task: {
        run: function () {
            search();
        },
        interval: 1000 * 60 * 2
    },
    updateTask: function (value) {
        this.task.interval = 1000 * 60 * value;
    }
});
var autoRefreshStore = Ext.create('Ext.data.Store', {
    fields: ['value', 'text'],
    data: [
        [1, '1 min'],
        [2, '2 mins'],
        [3, '3 mins'],
        [5, '5 mins'],
        [10, '10 mins'],
        [15, '15 mins']
    ]
});
Ext.TaskManager.start(InterVal.task);

Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Auto Refresh Interval',
    labelWidth: 'auto',
    margin: 10,
    displayField: 'text',
    valueField: 'value',
    store: autoRefreshStore,
    queryMode: 'local',
    listeners: {
        change: function (cmp, newValue) {
            Ext.TaskManager.stop(InterVal.task);
            InterVal.updateTask(newValue);
            Ext.TaskManager.start(InterVal.task);
        }
    },
    renderTo: Ext.getBody()
});

function search() {
    Ext.Msg.alert('Success', 'Welcome to search funtion..!');
}

Answer 2

您的回答很有帮助。由于我的代码已经设置好了，所以我不必创建单例 class。我已经有了任务对象的句柄。所以我所要做的就是更改 'change' 侦听器以在更改间隔值之前停止任务，然后重新启动任务。所以更改侦听器的最终代码将是

listeners: {
    change: function(obj, newValue, oldValue, eOpts) {
        Ext.util.TaskManager.stop(task);
        autoRefreshIntervalInMins = newValue;
        Ext.util.TaskManager.start(task);
    }
}

谢谢。我接受了你的回答，因为它让我知道该怎么做。

在 ExtJS 5.1.3 中动态更改 TaskManager 间隔

Dynamically changing TaskManager interval in ExtJS 5.1.3

extjs

extjs5