Question

I’m going to ask another newbie question. I have come across multiple ways for a child to reference functions and data defined at the parent class level, but I’m not sure what is the recommended way. Below is an example that I am dealing with, but this topic is generally important for me since I do not have a good understanding of reference and scope of parents and children. How can I reference functions and data of a parent from a child of a child element?

As usual, any help will be highly appreciated.

Mohammad

San Jose, CA

/******
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

I’m not sure about a “right” way to do it, but this is what I would do, and what I see most of the time in the Sencha forum and in their own code:

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...');
  }
});