Ext JS 扩展 Ext.Toolbar.TextItem 时的奇怪行为

Question

我正在尝试扩展 Ext.Toolbar.TextItem 以创建一个简单的时钟。 这样做的目的是能够在我的应用程序的状态栏中添加时钟。 我的扩展类如下所示：

Ext.define('Urlopy.Components.TimeDisplay', {
    extend : 'Ext.Toolbar.TextItem',
    initComponent : function() {
        var me = this;

        var dt = new Date();

        Ext.defer(this.onUpdate, 240, this);

        Ext.apply(me, {
            text : Ext.Date.format(dt, "Y-m-d H:i:s")
        });
        delete dt;
        this.callParent(arguments);
    },

    onUpdate : function(obj) {
        var dt = new Date();
        this.setText(Ext.Date.format(dt, "Y-m-d H:i:s"));
        delete dt;
        Ext.defer(this.onUpdate, 240, this);
    }
});

我不确定我这样做是否正确，在我尝试折叠面板之前它可以正常工作。我的布局基于 Ext.container.Viewport。

这是我得到的错误：http://vimeo.com/43978383

我不知道怎么了:(

欢迎任何帮助！

更新

这是我更新的组件：

Ext.define('Urlopy.Components.TimeDisplay', {
    extend : 'Ext.Toolbar.TextItem',
    initComponent : function() {
        this.callParent(arguments);
        //this.setText(Ext.Date.format(new Date(), "Y-m-d H:i:s"));
        Ext.defer(this.onUpdate, 240, this);
    },
    onUpdate : function(obj) {
        //this.setText(Ext.Date.format(new Date(), "Y-m-d H:i:s"));
        Ext.defer(this.onUpdate, 240, this);
    }
});

这现在有效，但是当我取消注释负责更新文本的 2 行时，所有崩溃：/

我收到此错误

el 未定义
var id = el.id,

Answer 1

你能试试这个并告诉我们它是否仍然崩溃？

    Ext.define('Urlopy.Components.TimeDisplay', {
        extend : 'Ext.Toolbar.TextItem',
        initComponent : function() {
            this.callParent(arguments);
            Ext.defer(this.onUpdate, 240, this);
        },
        onUpdate : function(obj) {
            console.log('tock');
            Ext.defer(this.onUpdate, 240, this);
        }
    });