Extjs4 带时钟的Ext JS状态栏

Extjs4 带时钟的Ext JS状态栏,extjs4,extjs4.1,Extjs4,Extjs4.1,我正在尝试创建一个带有时钟的状态栏。 我在sencha示例中找到了这个示例,但我正在尝试以更面向对象的方式构建它 Ext.define('Urlopy.Components.Statusbar', { extend : 'Ext.ux.statusbar.StatusBar', id : 'basic-statusbar', defaultText : 'Wczytane...', defaultIconCls : 'x-status-valid', iconCls : 'x-status-va

我正在尝试创建一个带有时钟的状态栏。 我在sencha示例中找到了这个示例,但我正在尝试以更面向对象的方式构建它

Ext.define('Urlopy.Components.Statusbar', {
extend : 'Ext.ux.statusbar.StatusBar',
id : 'basic-statusbar',
defaultText : 'Wczytane...',
defaultIconCls : 'x-status-valid',
iconCls : 'x-status-valid',
autoClear : 3000,
initComponent : function() {

    this.currentUserDisplay = Ext.create('Ext.toolbar.TextItem');
    this.currentUserDisplay.setText('Not logged in!');
    this.timeDisplay = Ext.create('Ext.toolbar.TextItem');
    this.timeDisplay.setText(Ext.Date.format(new Date(), 'Y-m-d H:i:s'));

    Ext.apply(this, {
                items : [this.currentUserDisplay, {
                            xtype : 'tbseparator'
                        }, this.timeDisplay],
                listeners : {
                    render : {
                        fn : function() {
                            Ext.TaskManager.start({
                                        run : function() {
                                            this.timeDisplay.setText(Ext.Date.format(new Date(),'Y-m-d H:i:s'));
                                        },
                                        interval : 1000
                                    });
                        },
                        delay : 100
                    }
                }
            });
    this.callParent();
},
setCurrentUser : function(username) {
    this.currentUserDisplay.setText('Logged as' + ": " + username);
},
startLoad : function(message) {
    if (message !== null) {
        this.showBusy({
                    text : message,
                    iconCls : "x-status-busy"
                });
    } else {
        this.showBusy();
    }
},
endLoad : function() {
    this.clearStatus({
                useDefaults : true
            });
}
}))

第一时间组件显示它显示的日期和时间是正确的,但它不会更新

问题可能是TaskManager或我的听众

我尝试过这样做,而不是他们:

initComponent : function() {

            this.currentUserDisplay = Ext.create("Ext.toolbar.TextItem");
            this.currentUserDisplay.setText('Nie jesteś zalogowany!');
            this.timeDisplay = Ext.create("Ext.toolbar.TextItem");
            this.timeDisplay.setText(Ext.Date.format(new Date(), "Y-m-d H:i:s"));

            Ext.apply(this, {
                        items : [this.currentUserDisplay, {
                                    xtype : 'tbseparator'
                                }, this.timeDisplay]
                    });

            this.callParent();

            var task = {
                run : function() {
                    this.timeDisplay.setText(Ext.Date.format(new Date(), "Y-m-d H:i:s"));
                },
                interval : 1000
            }
            Ext.TaskManager.start(task);
        },
但是没有运气:(


我知道这可能是一个很小的错误,但找不到它。

您遇到的是范围问题,运行函数中的这个没有指向状态栏。您需要添加一个范围:在间隔之后

参见示例