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或vanilla setInterval功能定期运行更新代码。

修改

示例：

// 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 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
});

});

自动更新extjs中的时间

3 个答案: