CODEWITHSUNDEEP
extjs
assembler
assembler

Reputation: 3300

extjs how to parametrize a component

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?

Upvotes: 1

Views: 356

Answers (3)

Jaydeep
Jaydeep

Reputation: 1716

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

Upvotes: 0

norbeq
norbeq

Reputation: 3076

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

Upvotes: 1

Alberto Rivera
Alberto Rivera

Reputation: 3752

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

Upvotes: 1

Related Questions