PDA

View Full Version : TaskRunner / TaskManager runing a function within MCV



jkisner
11 Mar 2012, 3:21 PM
Hello,

I'm attempting to find out how I can use TaskManager/TaskRunner to fire a function off from within an MCV based application controller file. I've tried using this.<function name> and this.getController('<Controller>').<function name> and all I ever get back is that the function doesn't exist or getController doesn't exist. I have placed my Controller code below. Any assistance would be greatly appreciated. I don't understand what scope Task Manager runs in. I'm assuming that is what is at the base of my issue.



Ext.define('DESKTOP.controller.Taskbar', {
extend: 'Ext.app.Controller',

views: [
'taskbar.Clock'
],

init: function(){
this.control({
// Setup Taskbar Clock
'taskbar': {
render: this.addClock
}
});
},

addClock: function(){
var oTaskbar;

// Add Toolbar Fill and Clock to Taskbar
oTaskbar = Ext.getCmp('desktopTaskbar');
oTaskbar.add([{ xtype: 'tbfill', itemId: 'taskfill' },{ xtype: 'clock' }]);

// Start Clock Update
this.updateClock();
updateClockTask = {
run: this.updateClock(), // <---- Function trying to be called ---<<<<
interval: 5000
};
Ext.TaskManager.start(updateClockTask); // <---- Starting TaskManager ---<<<<
},

updateClock: function(){
...
}
});

vietits
11 Mar 2012, 4:04 PM
See my fix in your code.


Ext.define('DESKTOP.controller.Taskbar', {
extend: 'Ext.app.Controller',


views: [
'taskbar.Clock'
],


init: function(){
this.control({
// Setup Taskbar Clock
'taskbar': {
render: this.addClock
}
});
},

addClock: function(){
var oTaskbar;

// Add Toolbar Fill and Clock to Taskbar
oTaskbar = Ext.getCmp('desktopTaskbar');
oTaskbar.add([{ xtype: 'tbfill', itemId: 'taskfill' },{ xtype: 'clock' }]);

// Start Clock Update
this.updateClock();
updateClockTask = {
//run: this.updateClock(), // <---- Function trying to be called ---<<<<
run: this.updateClock,
scope: this,
interval: 5000
};
Ext.TaskManager.start(updateClockTask); // <---- Starting TaskManager ---<<<<
},


updateClock: function(){
...
}
});

jkisner
11 Mar 2012, 7:47 PM
Vietits thank you for the help. It worked perfectly. If you have a minute can you explain the how exactly the scope property made this function correctly? I've always had difficulty with the scope property in extjs objects/functions.

Thanks again.

vietits
11 Mar 2012, 10:25 PM
updateClockTask = {
//run: this.updateClock(), <- this will call this.updateClock() and assigns its returned value to run property
run: this.updateClock, <- this will assign reference to this.updateClock to run property
scope: this, <- this will specify executing context when updateClock() is executed
interval: 5000
};

With your original code, there are two things in updateClockTask object need to mention:
1. The run property must be a function reference that will be called at each interval. So its value should be this.updateClock not this.updateClock(). The later is function calling and will assign its returned value to run property, not the function reference.

2. The scope property determines the this object (executing context) when calling the function specified in the run property. With Ext.TaskManager, the default scope is the task object (with your code, this will be updateClockTask object).

The problem that your task could not run is caused by the (1) above, not by (2). Scope may cause problem when the updateClock() is executed and its code refers to this object.