Update time in extjs automatically

Question

I want to show current time on a window in my app which is written using Extjs 3. The time should be updated every one second but I don't know how to do this. this is my code: Can anyone help me please?

function gettime(){
        var dt = new Date();
        dt = dt.format('h:i:s');
        return dt;
    };

var clock = { layout:'form', frame:false, region:'center', height:100, width:400,
items:[{id: 'currtime', xtype: 'displayfield',fieldLabel: 'Current Time'
,value:gettime()}]}`

Answer 1

Use the TaskManager or the vanilla setInterval function to run your updating code periodically.

Edit

Example:

// Keep a ref, in case you want to stop it later
var task = Ext.TaskMgr.start({
    interval: 1000
    ,run: function() {
        Ext.getCmp('currtime').setValue(gettime());
    }
});

Answer 2

If you don't need it for every second, but rather every minute you can do something like the following where you would only grab the time when the minute changes:

(function startClock() {
    var now = new Date();
    var sec = now.format('s');
    var runner = new Ext.util.TaskRunner();
    var task = function(dt) {
        // start the interval
        runner.start({
            run: function() {
                Ext.getCmp('currtime').setValue(gettime());
            },
        interval: 60000 // 1 minute
        });
    };

    Ext.getCmp('currtime').setValue(gettime()); // inital set time
    Ext.defer(task, (60 - sec) * 1000, this, [now]); // get the time on next minute change
})();

Answer 3

This code may help you, i used ExtJS ver 4.2.1

Ext.onReady(function() {

var filterPanel = Ext.create('Ext.panel.Panel', {
bodyPadding: 5,
width: 200,
title: 'Update Time in ExtJS',
items: [{
    fieldLabel: 'Time',
    id: 'txtTime',
    name: 'txtTime',
    xtype: 'textfield'
  }
],
renderTo: Ext.getBody()
});

 Ext.TaskManager.start({
    run: function() {
        Ext.getCmp('txtTime').setValue(Ext.Date.format(new Date(), 'H:i:s'));
    },
    interval: 1000
});

});