Frage zu einem nicht funktionierenden setInterval bei einer ExtJS-Komponente

[pkm]

Ich habe eine ExtJS-Komponente vom Typ 'textfield', welche in ein div-Element gerendert wird: <div id = "renderTarget" />

Hier die Komponente:

[CODE lang="javascript" title="Komponente, bei welcher das Feld beschrieben wird (Zeile 18)"]Ext.onReady (function () {

Ext.create('Ext.form.FormPanel', {
title : 'Uhrzeit und Datum:',
width : 400,
bodyPadding: 10,
renderTo : 'renderTarget',
items: [{
xtype : 'textfield',
grow : false,
readOnly : true,
name : 'time',
id : 'imp',
anchor : '100%'
}]
});

Ext.get("imp").component.setHtml(getDateF());

});
[/CODE]

Hier ist nun die Funktion getDateF(), die das Datum generiert, welches in die Komponente geschrieben werden soll. Der Clou ist der, dass ich möchte, dass das Datum jede Sekunde neu angezeigt wird, und zwar mit "setInterval": setInterval(getDateF, 1000);

Das Problem ist, dass das gar nicht erneuert wird. Meine Frage: Warum ist das so?

setInterval(getDateF, 1000);

function getDateF() { //TODO: Warum geht das nicht?
     var str = "";

    var days = new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday");
    var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

    var now = new Date();
 
    const zeroPad = (num, places) => String(num).padStart(places, '0')
 
    var hrs = zeroPad(now.getHours(), 2);
    
    var mts = zeroPad(now.getMinutes(), 2);

    var scds = zeroPad(now.getSeconds(), 2);

    str += days[now.getDay()] + ", " + now.getDate() + " " + months[now.getMonth()] + " " + now.getFullYear() + " " + hrs +":" + mts + ":" + scds;
    return str;
}

 

[pkm]

Es funktioniert wie folgt:

<script type = "text/javascript">

Ext.onReady (function () {

  Ext.create('Ext.form.FormPanel', {
    title      : 'Uhrzeit und Datum:',
    width      : 400,
    bodyPadding: 10,
    renderTo   : 'renderTarget',
    items: [{
        xtype     : 'textfield',
        grow      : false,
        readOnly : true,
        name      : 'time',
        id : "imp",
        anchor    : '100%'
    }]
});

currentTime();

});

function getDate() {
   
    var str = "";
   
    var days = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
    var months = new Array("01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12");

    var now = new Date();
 
    var ddd = now.getDate()+"";
 
    if(ddd.length < 2) {
        ddd = "0" + ddd;
    }
 
    str += now.getFullYear() + "-" + months[now.getMonth()]  + "-" + ddd + " " + days[now.getDay()];
   
    return str;
}

function currentTime() {
  let date = new Date();
  let hh = date.getHours();
  let mm = date.getMinutes();
  let ss = date.getSeconds();
 
   hh = (hh < 10) ? "0" + hh : hh;
   mm = (mm < 10) ? "0" + mm : mm;
   ss = (ss < 10) ? "0" + ss : ss;
   
   let time = hh + ":" + mm + ":" + ss + " " + getDate(); //+ session;
 
     Ext.get("imp").component.setHtml(time);
 
  let t = setTimeout(function(){ currentTime() }, 1000);
 
 
}

    </script>