JS範圍問題

Question

如何訪問I 「將myHandler」 從「標題 - > tbar->用品 - >處理程序中：

Application.MenuPanel = Ext.extend(Ext.Panel, { 
title: 'Standard', 
    tbar: [{ 
     xtype: 'buttongroup', 
     columns: 3, 
     title: 'MyTitle', 
     items: [{ 
      text: 'Addl', 
      scale: 'large', 
      rowspan: 3, iconCls: 'add', 
      iconAlign: 'top', 
      cls: 'x-btn-as-arrow', 
      handler: this.myHandler.createDelegate(this, ['Hello World']) // <-- How to acces myHandler()? 
     }, 
     { 
      text: 'Delete', 
      scale: 'large', 
      rowspan: 3, iconCls: 'delete', 
      iconAlign: 'top', 
      cls: 'x-btn-as-arrow' 
     }, 
     ] 
    }] 


,myHandler : function (name) { 
    Ext.Msg.alert('Inside', 'Hello ' + name); 
} 

}）;

錯誤：

this.myHandler is undefined [Break on this error] handler: this.myHandler.createDelegate(this, ['Hello World'])

Answer 1

在擴展的第二個參數中，您聲明瞭一個將合併到您的類的原型中的對象。

在您的發言中，此在聲明過程中解決，而不是在實例化過程中解決。因此，這個是指您聲明此類的上下文，而不是它的未來實例。

您應該在構造函數中分配處理程序。我不知道哪個名字它在ExtJS的，但它可能是這樣的初始化：

Application.MenuPanel = Ext.extend(Ext.Panel, { 
    title: 'Standard', 
    tbar: null, 
    initialize: function() { 
     this.myHandler.createDelegate(this, ['Hello World']); 
     this.tbar = [{ 
      xtype: 'buttongroup', 
      columns: 3, 
      title: 'MyTitle', 
      items: [{ 
       text: 'Addl', 
       scale: 'large', 
       rowspan: 3, iconCls: 'add', 
       iconAlign: 'top', 
       cls: 'x-btn-as-arrow', 
       handler: this.myHandler.createDelegate(this, ['Hello World']) 
      }, 
      { 
       text: 'Delete', 
       scale: 'large', 
       rowspan: 3, iconCls: 'delete', 
       iconAlign: 'top', 
       cls: 'x-btn-as-arrow' 
      }, 
      ] 
      }]; 

    }, 


    myHandler : function (name) { 
     Ext.Msg.alert('Inside', 'Hello ' + name); 
    } 
} 

注：只有在原型分配原語類型（字符串，整數），因爲對象的屬性不會被克隆，因此任何實例將共享相同的參考。一般而言，這僅適用於功能。

Answer 2

最終和工作解決方案。謝謝BiAiB。

Application.MenuPanel = Ext.extend(Ext.Panel, { 
    title: 'Standard', 
    tbar: null, 
    initComponent: function() { 

     Ext.apply(this, { 

      tbar : [{ 
       xtype: 'buttongroup', 
       columns: 3, 
       title: 'MyTitle', 
       items: [{ 
        text: 'Addl', 
        scale: 'large', 
        rowspan: 3, iconCls: 'add', 
        iconAlign: 'top', 
        cls: 'x-btn-as-arrow', 
        handler: this.myHandler.createDelegate(this, ['Hello World']) 
       }, 
       { 
        text: 'Delete', 
        scale: 'large', 
        rowspan: 3, iconCls: 'delete', 
        iconAlign: 'top', 
        cls: 'x-btn-as-arrow' 
       }, 
       ] 
       }] 
     }) 
     Application.MenuPanel.superclass.initComponent.apply(this, arguments); 
    }, 


    myHandler : function (name) { 
     Ext.Msg.alert('Inside', 'Hello ' + name); 
    } 
});