ExtJS TaskRunner

时间:2014-12-31 07:33:58

标签: javascript extjs extjs-mvc

我还在EXTJS的学习过程中,非常感谢任何帮助。

我的目标是将数据加载到网格中,其中一个单元格需要每分钟增加一个值。从我的研究使用TaskRunner函数是要走的路,但无法弄清楚它的放置位置以及如何使用它。我的假设是它需要进入模型或控制器,但我不确定。在我的简单项目中,我使用的是MVC架构。

目前我的网格按预期工作。它在文件中读取日期转换,产生分钟值。这是我需要增加的那个微小的价值。

下面的代码是我正在使用的一个示例TaskRunner snippit,对或错我还不知道。

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();

型号:

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);
            }
        }
    ]

});

控制器:

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);
    }
});

查看:

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();
                })
            }
        }
    }
});

示例JSON文件:

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

1 个答案:

答案 0 :(得分:2)

您在创建任务的代码中有错误 - 您应该提供运行配置属性的函数,而不是调用的结果。试试这个:

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();

您可以将该代码放入loadActionItems方法。