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分钟后运行 - 这是我在var autoRefreshIntervalInMins = 5;中设置的默认值。更改事件触发器就好了，但任务间隔永远不会改变。我该如何做到这一点？

Answer 1

尝试使用singleton类ExtJS。

在 singleton 类中，您可以创建自己的函数并使用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

你的回答有帮助。由于我的代码已经设置的方式，我没有必要创建一个单例类。我已经有了一个任务对象的句柄。因此，我所要做的就是在更改间隔值之前更改“更改”侦听器以停止任务，然后重新启动任务。因此，更改侦听器的最终代码将是

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

感谢。我接受了你的答案，因为它给了我一个关于该做什么的线索。

在ExtJS 5.1.3中动态更改TaskManager间隔

2 个答案: