extjsextjs4extjs5sencha-architect

Implementing Task Runner for store output in ExtJS


I'm fairly new to ExtJS and I'm kinda stuck in one of the problems so I need your help.

Basically I access my application by using following URL:

servername:port/XMII/CM/XYZ/index.html?machine=1&typeofpage=dashboard

I get these URL params machine and typeofpage via following code used in global controller getMode():

//get the url parameters
var url = window.location.search,
urlParams = Ext.Object.fromQueryString(url);

return {

    machineID: urlParams.machine,
    typeofPage: urlParams.typeofpage
};

Now depending upon the typeofpage, I decide which page to open via following code in the afterrender method of initial viewport:

var mode = this.getMode();

if(mode.typeofpage=== 'dashboard') {

      panel = Ext.create('XYZ.view.Dashboard',{
        ID_MACHINE: mode.machineID
    });

          component.add(panel);

}

So above code calls my dashboard page correctly passing machineID as 1 properly.

With this machineID property, I pass that to store MachineParts and this store gives me all of hte machine parts for machine ID 1. Following is the code in aferrender of XYZ.view.Dashboard:

var me = this,
    machinepartIds= [];

Ext.defer(function(){

    component.mask('Loading...');

    me.getStore('MachinePart').load({
            params:{
                'Param.1': component.ID_MACHINE
            },
            callback: function(response) {
                component.unmask();
                Ext.each(response, function(panel) {
                    machinepartIds.push(panel.get('MachinePartID'));

                });
   alert('Machine IDs: ' + machinepartIds.toString();
        }
    });
},10);

So lets say it gives me back following data:

MachineID    MachinePartID
   1               20
   1               21
   1               22

Now I have a function called loadKPIs which takes parameter as ID - that is machinepartID. I use this loadKPIs function to populate all of the KPIs on the page and display them for a particular machinepart ID as a dashboard.

I want to pass machinepartIDs 20,21,22 to the loadKPIs function every 10 min so that I can show the dashboard for each machinepart for 10 min.

For example, I will start with machinepart ID 20. after 10 min, I would like to pass achinepart ID as 21. After 10 min I would like to pass machinepart ID as 22. Then again back to 20 after 10 min. I'm sure I need to use TaskRunner but I don't know how to do it.


Solution

  • If you want to use Ext.util.TaskManager to call a function at an interval and have a friendly API and control to start/stop whenever you want, here's a simple code snippet:

    var task = Ext.util.TaskManager.newTask({
        interval : 600000,
        scope    : this,
        run      : function() {}
    });
    
    Ext.util.TaskManager.start(task);
    

    or of course you can use setInterval:

    setInterval(function() {
        doSomething();
    }, 6000000);