I'm trying to pass two parameters oneOfAll and twoOfAll into a container. From the initComponent function I do:

initComponent: function () {
       this.callParent(arguments);
       console.log('Results', this.oneOfAll, this.twoOfAll);
}

and the browser's console prints the correct data, but when:

items: [
          {
              xtype: 'button',
              text: 'Other click',
              id: 'buttonClick',
              handler: function(item) {
                  Ext.Msg.alert('Other Click', '!!!' + this.oneOfAll);
              }
          },
          {
              xtype: 'button',
              text: 'CLICK',
              id: 'buttonClick_2',
              handler: function(item) {
                 Ext.Msg.alert('Other Click', '!!!' + this.twoOfAll);
              }
           }
      ]

these values are not seen by the container config, both times undefined is returned.

I have this fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2sk3

How can I pass these parameters into the container and be seen by it?

3 Answers

1
norbeq On Best Solutions

You can set reference to current component in initComponent method and use them in child component.

Take a look on example: https://fiddle.sencha.com/#view/editor&fiddle/2skh

1
Alberto Rivera On

Inside the handler, this refers to the item object, not your component.

To fix this, you could try accessing the component by ID, and get its property directly.

For example (using your mypanel id from your fiddle):

{
    xtype: 'button',
    text: 'Other click',
    id: 'buttonClick',
    handler: function (item) {
        var cmp = Ext.getCmp('mypanel');
        Ext.Msg.alert('Other Click', '~~!!' + cmp.oneOfAll);
    }
},
1
Jaydeep On

Your handler has a different scope and configs which you set are in different.

In order to fetch the values, get the reference of that component first and then try to access.

handler: function(item) {       
   Ext.Msg.alert('Other Click', '!!!' + item.up().oneOfAll);
   Ext.Msg.alert('Other Click', '!!!' + item.up().twoOfAll);
}