CODEWITHSUNDEEP
javascriptextjs
Beetlejuice
Beetlejuice

Reputation: 4425

Why my event handler is not called

I´m using ExtJs4.1, here is my example. The "calendarioChange" is not called in this way:

Ext.define('App.view.atendimento.Agenda', {
  extend: 'Ext.window.Window', 
  maximized: true,
  bodyPadding: 4,
  constrain: true,
  layout: 'hbox',
  items:[
    {
        xtype: 'container',
        width: 300,
        layout: 'vbox',
        items: [
            {
                xtype: 'datepicker',
                handler: this.calendarioChange
            }
        ]
    }
  ],
  calendarioChange: function(picker, date){
    alert('changed');
  }
});

but in thsi way works:

 xtype: 'datepicker',
     handler: function(picker, date){
                   alert('changed');
              }

What I´m missing in the first case?

Thanks.

Upvotes: 1

Views: 97

Answers (2)

Israel
Israel

Reputation: 446

the problem is you haven't taken in account the scope of your handle. Every time you nest a {} constructor you change the 'this' pointer. In your case:

this.calendarioChange

Can not work because 'this' is pointing to the datepicker not the Window. You could solve it by adding a function in the event that locate the window and then call to the appropiate method:

items: [
            {
                xtype: 'datepicker',
                handler: function(picker, date) {
                    var window = this.up('window');
                    window.calendarioChange(picker, date);
                }
            }
...

Upvotes: 1

skovalyov
skovalyov

Reputation: 2099

Because the method you define as an event handler is not in this scope. For example you can declare the method outside Ext.define() call and then refer it just by name.

Upvotes: 0

Related Questions