Uncaught TypeError：Object＃<Object> has no method'apply'error

Question

当我点击Edit按钮时，出现错误Uncaught TypeError: Object #<Object> has no method 'apply'。这是我的面板：

Ext.define(
    "ux.panel.MyPanel", { 
    extend : "Ext.form.Panel", 
    xtype : "MyPanel", 
    title : "Bla bla title" 

    initComponent : function() { 
     ux.panel.MyPanel.superclass.initComponent.call(this); 
    }, 
    init : function (initParameters) { 
     this.initParameters = initParameters; 

     this.removeAll(true); 

     if (this.initParameters == null) 
      return; 
    }, 
    editSomething : function() { 
     alert("editTV"); 
    }, 
    tbar : [{ 
      text : "Edit" 
      iconCls : "silk-edit-16", 
      id : "editbutton", 
      disabled : false, 
      listeners : { 
       click : { 
        scope : this, 
        fn : this.editSomething 
       } 
      } 
     }, { 
      text : "Remove", 
      iconCls : "silk-delete-16", 
      id : "removeButton", 
      disabled : false, 
      listeners : { 
       click : { 
        scope : this, 
        fn : function() { 
         alert("RemoveTV"); 
        } 
       } 
      } 
     } 
    ] 
}); 

此面板包含在由许多其他面板组成的页面中。我怀疑这在这个编辑器里有什么不是指向我的小组。我对如何处理这个问题没有任何线索。

有人对此有何想法？

Answer 1

那是因为this不是你所期望的。

添加tbar在initComponent功能，如：

initComponent: function() { 
    Ext.apply(this, { 
     tbar: [{ 
      text: "Edit", 
      iconCls: "silk-edit-16", 
      id: "editbutton", 
      disabled: false, 
      listeners: { 
       click: { 
        scope: this, 
        fn: this.editSomething 
       } 
      } 
     }, { 
      text: "Remove", 
      iconCls: "silk-delete-16", 
      id: "removeButton", 
      disabled: false, 
      listeners: { 
       click: { 
        scope: this, 
        fn: function() { 
         alert("RemoveTV"); 
        } 
       } 
      } 
     }] 
    }); 

    this.callParent(arguments); 
} 

http://jsfiddle.net/gkcU7/