Displaying count down timer in Sencha Touch 2 - sencha-touch-2

Question

I need to display a countdown timer, implemented it using delayed task.
code as below:
var task = Ext.create('Ext.util.DelayedTask', function() {
if (sec < 1 && min > 0) {
min--;
sec = 60;
}
if (min == 0 && sec == 1) {
task.cancel();
}
sec--;
Ext.getCmp('minute').setHtml(min);
Ext.getCmp('second').setHtml(sec);
console.log('minute is' + min + 'second is' + sec);
task.delay(1000);
}, this);
task.delay(1000);
With the above implementation, function gets called only once.
Looking at the discussion at this thread
Auto Refresh the List in Sencha Touch Application the above code should work. But, it is not working. What could be wrong in my code? Thanks.

Answer 1

As far as I know, Ext.util.DelayedTask is meant for delaying a task without executing it.
This can be useful for delaying an Ajax-call on a form, as you can see in the docs:
This method is especially useful for things like detecting whether a user has finished typing in a text field. [..] You can use this class to buffer the keypress events for a certain number of milliseconds, and perform only if they stop for that amount of time.
Why don't you just use a regular setTimeout? Something like http://jsfiddle.net/EreaP/ works perfectly.

Answer 2

Late response:
Ext.define('MyApp.view.TimerClock', {
extend: 'Ext.Container',
xtype: 'timerClock',
duration: 3 * 60 * 60, //default to 3 hour
paused: false,
clockIntervalHook: undefined,
config: {
listeners: {
initialize: function () {
this.start();
}
}
},
start: function () {
var me = this,
duration = me.duration,
updateClock = function () {
if (me.isPaused()) {
return;
}
me.setHtml(me.formatTime(duration--));
if (duration <= 0) {
me.stop();
}
};
me.clockIntervalHook = setInterval(updateClock, 1000);
return me;
},
pause: function () {
this.paused = true;
return this;
},
isPaused: function () {
return this.paused == true
},
resume: function () {
this.paused = false;
},
restart: function () {
this.stop();
this.start();
},
stop: function () {
clearInterval(this.clockIntervalHook);
return this;
},
//format the given seconds into "HH:MM:SS" format
//override this if you need custom behavior
formatTime: function (seconds) {
var hours = Math.floor(seconds / 3600);
hours = hours <= 9 ? "0" + hours : hours;
seconds %= 3600;
var minutes = Math.floor(seconds / 60);
minutes = minutes <= 9 ? "0" + minutes : minutes;
seconds %= 60;
seconds = seconds <= 9 ? "0" + seconds : seconds;
return hours + ":" + minutes + ":" + seconds
}
});
Any other view, add the timer simply using
{ xtype : 'timerClock' }