Question

我正在尝试使用时钟创建状态栏。我在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);
        },

但没有运气:(

我知道这可能是一个小错误，但无法找到它。

Answer 1

你所拥有的是一个范围问题，这在你的运行功能中没有指向状态栏。你需要添加一个范围：这是在间隔之后。

参见示例http://jsfiddle.net/nscrob/kR9ev/17/

Ext JS StatusBar with clock

1 个答案: