ExtJS TaskRunner

Question

I'm still in the learning process with EXTJS and any help would be much appreciated.

The goal for me is to load data into a grid where one cell needs to have the value incremented every minute. From my research using the TaskRunner function is the way to go but can't figure out where to put it and how to use it. My assumption is that it needs to go into the model or the controller but I'm not sure. In my simple project I'm using the MVC architecture.

Currently my gird works as expected. It reads in a file does a date conversion that produces a minute value. It's that minute value that I need to increment.

The code below is a sample TaskRunner snippit that I'm working with, right or wrong I don't know yet.

var runner = new Ext.util.TaskRunner();
var task = runner.newTask({
    run: store.each(function (item) 
    {
        var incReq = item.get('request') + 1;
        item.set('request', incReq);
    }),

     interval: 60000 // 1-minute interval
    });
task.start();

Model:

Ext.define("myApp.model.ActionItem", {
    extend : "Ext.data.Model",
    fields : [
        {
            name: 'pri',
            type: 'int'
        },
        {
            name: 'request',
            type: 'int',
            defaultValue: 0,
            convert : function(v, model) {
                return Math.round((new Date() - new Date(v)) / 60000);
            }
        }
    ]

});

Controller:

Ext.define("myApp.controller.HomeController", {
    extend: "Ext.app.Controller",
    id:     "HomeController",
    refs: [
        { ref: "ActionItemsGrid",    selector: "[xtype=actionitemgrid]" },
        { ref: "DetailsPanel",       selector: "[xtype=actionitemdetails]" }
    ],
    pri: "",
    models: ["ActionItem"],
    stores: ["myActionStore"],
    views:
        [
            "home.ActionItemDetailsPanel",
            "home.ActionItemGrid",
            "home.HomeScreen"
        ],
    init: function () {
        this.control({
            "#homescreen": {
                beforerender: this.loadActionItems
            },
            "ActionItemsGrid": {
                itemclick: this.displayDetails
            }
        });
    },
    displayDetails: function (model, record) {
        this.getDetailsPanel().loadRecord(record);
    },
    loadActionItems: function () {
        var store = Ext.getStore("myActionStore");
        store.load();
        this.getActionItemsGrid().reconfigure(store);
    }
});

View:

Ext.define("myApp.view.home.ActionItemGrid", {
    extend: "Ext.grid.Panel",
    xtype: "actionitemgrid",
    resizable: true,
    multiSelect: false,
    enableDragDrop  : false,
    store: null,

    columns:
        [
            { header: "Pri",           dataIndex: "pri",      sortable: false, autoSizeColumn: true},
            { header: "Req",           dataIndex: "request",  sortable: false, autoSizeColumn: true}
        ],

    viewConfig:
    {
        listeners: {
            refresh: function(dataview) {
                Ext.each(dataview.panel.columns, function(column) {
                    if (column.autoSizeColumn === true)
                        column.autoSize();
                })
            }
        }
    }
});

Sample JSON File:

{
    "actionitems" : [
        {
            "pri":          1,
            "request":      "2014-12-30T03:52:48.516Z"
        },
        {
            "pri":          2,
            "request":      "2014-12-29T05:02:48.516Z"
        }
    ]
}

Answer 1

You have error in code which creates task - you should provide function to run configuration property, not result of invocation. Try this:

var runner = new Ext.util.TaskRunner();
var task = runner.newTask({
    run: function() {
        store.each(function (item) 
        {
            var incReq = item.get('request') + 1;
            item.set('request', incReq);
        })
    },

    interval: 60000 // 1-minute interval
});
task.start();

You can put that code in loadActionItems method.