Ext JS StatusBar with clock - extjs4

Question

I'm trying to create a status bar with clock.
I found example in sencha examples, but I'm trying to build it more object oriented way.
Ext.define('Urlopy.Components.Statusbar', {
extend : 'Ext.ux.statusbar.StatusBar',
id : 'basic-statusbar',
defaultText : 'Wczytane...',
defaultIconCls : 'x-status-valid',
iconCls : 'x-status-valid',
autoClear : 3000,
initComponent : function() {
this.currentUserDisplay = Ext.create('Ext.toolbar.TextItem');
this.currentUserDisplay.setText('Not logged in!');
this.timeDisplay = Ext.create('Ext.toolbar.TextItem');
this.timeDisplay.setText(Ext.Date.format(new Date(), 'Y-m-d H:i:s'));
Ext.apply(this, {
items : [this.currentUserDisplay, {
xtype : 'tbseparator'
}, this.timeDisplay],
listeners : {
render : {
fn : function() {
Ext.TaskManager.start({
run : function() {
this.timeDisplay.setText(Ext.Date.format(new Date(),'Y-m-d H:i:s'));
},
interval : 1000
});
},
delay : 100
}
}
});
this.callParent();
},
setCurrentUser : function(username) {
this.currentUserDisplay.setText('Logged as' + ": " + username);
},
startLoad : function(message) {
if (message !== null) {
this.showBusy({
text : message,
iconCls : "x-status-busy"
});
} else {
this.showBusy();
}
},
endLoad : function() {
this.clearStatus({
useDefaults : true
});
}
});
The first time component shows it displays date and time correct, but it doesn't update.
Problem is probably TaskManager or my listeners.
Instead of them I've tried doing this:
initComponent : function() {
this.currentUserDisplay = Ext.create("Ext.toolbar.TextItem");
this.currentUserDisplay.setText('Nie jesteś zalogowany!');
this.timeDisplay = Ext.create("Ext.toolbar.TextItem");
this.timeDisplay.setText(Ext.Date.format(new Date(), "Y-m-d H:i:s"));
Ext.apply(this, {
items : [this.currentUserDisplay, {
xtype : 'tbseparator'
}, this.timeDisplay]
});
this.callParent();
var task = {
run : function() {
this.timeDisplay.setText(Ext.Date.format(new Date(), "Y-m-d H:i:s"));
},
interval : 1000
}
Ext.TaskManager.start(task);
},
but no luck :(
I know that this is probably a tiny mistake, but can't find it.

Answer 1

What you have is a scope issue, this in your run function doesn't point to the status bar. you need to add a scope: this after the interval.
see example http://jsfiddle.net/nscrob/kR9ev/17/