PDA

View Full Version : Displaying Clock on screen



sideeque
5 Oct 2012, 1:39 PM
I am new to Sencha Touch. I want to display system clock in my screen. How do I do it? I get current time when the page loaded. But, I need it to be incremented or changes when the actual clock changes. I have created a button with text and it get updated once the button clicked. I want to get it updated automatically without clicking on button.

{
xtype: 'button',
text: Ext.Date.format(new Date(), 'g:i:s A'),
handler : function()
{
this.setText(Ext.Date.format(new Date(), 'g:i:s A'));
}
}

shepsii
8 Oct 2012, 2:08 AM
use a loop with setTimeout().

But note this can lead to some messy performance. If the clock updates while, for instance, the user is scrolling (another javascript task) the scrolling will be choppy.

sideeque
8 Oct 2012, 5:41 AM
Is there any best way to do this common user scanario? Anybody implemented clock in their screen?

Samuel Horwitz
17 Oct 2012, 12:19 PM
The other guy recommended setTimeout with a loop which is correct however Sencha/Ext provides a wrapper called "DelayedTask". http://docs.sencha.com/touch/2-0/#!/api/Ext.util.DelayedTask

Actually, if you were using vanilla Javascript you could use setInterval instead of setTimeout in a loop, but that is besides the point.

Write now what you are doing is getting the current time as a string and then writing it to the page. If you want this to occur with enough regularity to resemble a clock, then you have to use timers to automatically poll for a new time every X milliseconds.

So the logic you would want is a timer that will call your function


function()
{
this.setText(Ext.Date.format(new Date(), 'g:i:s A'));
}

every X milliseconds. Also your "this" reference must be a function to your component you are actually setting the text of.