extjs how to parametrize a component - extjs

Question

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?

Answer 1

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

Answer 2

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);
}
},

Answer 3

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