Ext JS StatusBar with clock

问题

I'm trying to create a status bar with clock. I found example in sencha examples, but I'm trying to build it more object oriented way.

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

});

The first time component shows it displays date and time correct, but it doesn't update.

Problem is probably TaskManager or my listeners.

Instead of them I've tried doing this:

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

but no luck :(

I know that this is probably a tiny mistake, but can't find it.

回答1:

What you have is a scope issue, this in your run function doesn't point to the status bar. you need to add a scope: this after the interval.

see example http://jsfiddle.net/nscrob/kR9ev/17/

来源：https://stackoverflow.com/questions/11030477/ext-js-statusbar-with-clock