javascript - Sencha Touch 2-子元素引用父元素中的函数的正确方法？

Question

我要问另一个新手问题。我遇到过让子级引用在父类级别定义的函数和数据的多种方法，但我不确定推荐的方法是什么。下面是我正在处理的一个例子，但是这个主题对我来说通常很重要，因为我对 parent 和 child 的引用范围和范围没有很好的理解。如何从子元素的子元素引用父元素的函数和数据？

像往常一样，我们将非常感谢任何帮助。

穆罕默德

加利福尼亚州圣何塞

/******
This is a floating panel with a formpanel inside it, that has an email field and a button to process the email. 
When the button is tapped, I want to call the processEmails() function from the button.
******/
Ext.define('myapp.view.ForwardPanel', {
    extend  : 'Ext.Panel',
    xtype   : 'forwardPanel',
    initialize: function() {
        this.callParent(arguments);
        var btn = {
            xtype: 'button',
            ui: 'action',
            text: 'Send',
            listeners: {
                tap: function(){
                    processEmails(); //<- **How can I reference and call this function?**
                                 // This function is defined at the parent class level 
                                 // (indicated at the bottom of the code listing)
             }}
        };
        var form = {
            items: [{
                    xtype: 'fieldset',
                    instructions: 'Enter multiple emails separated by commas',
                    title: 'Forward this message.',
                    items: [ {
                            xtype: 'emailfield',
                            name: 'email',
                            label: 'Email(s)'
                    },btn]             // The button is added to the form here
                }]
        };
        this.add(form);
    },

    // this is the parent level function I want to call upon button tap.
    processEmails: function(){
        console.log('Processing email...');
    }
});

Answer 1

我不确定“正确”的方法，但这就是我会做的，也是我大多数时间在 Sencha 论坛和他们自己的代码中看到的:

Ext.define('myapp.view.ForwardPanel', {
  ...
  initialize: function() {
    this.callParent(arguments);
    var me = this;     // <---- reference to the "ForwardPanel" instance
    var btn = {
        xtype: 'button',
        ui: 'action',
        text: 'Send',
        listeners: {
          tap: function(){
            me.processEmails(); // <-- notice the "me" in front
          }
        }
    };
    ...
  },

  // this is the parent level function I want to call upon button tap.
  processEmails: function(){
    console.log('Processing email...');
  }
});