[SOLVED] Countdown timer/clock ?

[mwmayer4]

In my controller I have the following code which will automatically refresh my grid at the specified interval. I would like to add another element to the toolbar that displays: Next refresh in xx:xx , where xx:xx is the time left before the refresh occurs. I have no clue how to code a countdown clock based on the interval. Any help would be much appreciated.

	autoRefreshProd2: function() {
		var clock2 = this.getProdGrid002().down('#clock2');
		var refresh2 = Ext.TaskManager.start({
			run: function() {
				clock2.setText(Ext.Date.format(new Date(), 'g:i:s A'));
				this.getProdGrid002().show();
				this.getStore('ProdGrid002s').load();
			},
			interval: 300000, //5 minutes
			scope: this
		});
	},

[eweiler]

Have text on your toolbar that displays the time left before the refresh occurs. Make another task that changes the seconds left until the next refresh.

[mwmayer4]

I have no clue how to code a countdown clock (backwards). I know how to code a clock like this:

runClock2: function() {
		var clockCmp2 = this.getProdGrid002().down('#clock2');
		task = Ext.TaskManager.start({
			run: function() {
				clockCmp2.setText(Ext.Date.format(new Date(), 'g:i:s A'));
			},
			interval: 1000
		});
	},

but how would you make it start at let's say 05:00 and count backwards?

[eweiler]

You'd have to tell it what to say every second.

[mwmayer4]

For those interested in a solution, I accomplished it with the following. Not sure if the best way but it works.

	autoRefreshProd2: function() {
                //show a clock in the toolbar and refresh grid every 5 minutes
		var clock2 = this.getProdGrid002().down('#clock2');
		var refresh2 = Ext.TaskManager.start({
			run: function() {
				clock2.setText(Ext.Date.format(new Date(), 'g:i:s A'));
				this.getProdGrid002().show();
				this.getStore('ProdGrid002s').load();
			},
			interval: 300000,
			scope: this
		});
                //show "Next refresh in xxx" in the toolbar
		var timer2 = this.getProdGrid002().down('#timer2'); //get the tbtext item to place the messag
		var secs = 300; //set for 5 minutes refresh
		var countDown2 = Ext.TaskManager.start({
			run: function() {
				secs -= 1;
				if (secs <= 0) {
					secs = 300; //must re-set or the secs variable goes negative
				}
				text2 = 'Next refresh in ' + secs; create the message to display
				timer2.setText(text2);  //update the toolbar text
			},
			interval: 1000, // = 1 second
			scope: this 
		});
	},