extjs - extjs 自动更新时间

Question

我想在我的应用程序中使用 Extjs 3 编写的窗口上显示当前时间。时间应该每秒钟更新一次，但我不知道该怎么做。这是我的代码：有人可以帮帮我吗？

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

使用TaskManager或 vanillasetInterval函数定期运行更新代码。

编辑

例子：

// 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

如果您不需要每秒都需要它，而是每分钟都需要它，您可以执行以下操作，您只会在分钟变化时获取时间：

(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

这段代码可以帮助你，我使用 ExtJS 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
});

});