ExtJs 4 callbacks

Question

I had a hard time trying to find out why my assignments where lost, and found that callbacks scope was different than I thought.

What I did was to create a variable in a controller, then trying to pass a callback to a window created by the controller, then, on an event on that window, call-back a function in the controller.

For example, in my controller I have:

callWindow: function(){
  var myWin = Ext.Create('MyApp.view.myWin', {doSomething: this.doSomething});
},

doSomething: function(data){
  this.myData = data;
},

useTheData: function(){
  console.log(this.myData);
}

In myWin's controller, I have an even handler that calls doSomething this way:

onBtnClick: function(button){
  var win = button.up('window');
  var data = {id: 1, name: "John"}; // please, don't pay attention to this, it's a record I'm passing to the caller.
  win.doSomething(data);
}

As you can see, in "doSomething" function, I'm assigning the controller var myData, with the value passed by the window's controller. Initially I thought the scope of "doSomething" was the caller controller, but it's the window's controller, that's why useTheData gives an error saying this.myData is null.

I've solved the problem by passing a new parameter named "caller: this", and in doSomething, receiving that parameter, and using it instead of "this".

The question is, is there a easy (with less steps) way to do this?.

Answer 1

You need to apply a scope for your callback to the window and use Ext.callback

callWindow: function(){
  var myWin = Ext.Create('MyApp.view.myWin', {doSomething: this.doSomething, scope: this});
},

onBtnClick: function(button){
  var win = button.up('window');
  var data = {id: 1, name: "John"}; // please, don't pay attention to this, it's a record I'm passing to the caller.
  Ext.callback(win.doSomething, win.scope, [data]);
}

This is one way, your solution is another and there are even more.