You should make use of the scope config option in components
.
- in Ajax calls
var MyPanel = Ext.extend(Ext.Panel, { doSave: function(){ Ext.Ajax.request({ url: 'your_url', params: .... success: function(response){ response = Ext.decode(response.responseText); this.onSuccess(response) }, scope: this //the scope in which the success callback is called }) }, onSuccess: function(){ .... } }In this example, specifying the scope is very useful. By default, the success callback on Ajax calls is executed with the scope being the browser ‘window’ object, which is not very useful. In the code above, we execute the success callback in the ‘this’ scope, ‘this’ being the instance of MyPanel which executes the doSave method. This is why we can safely call
this.onSuccess(response), as ‘this’ is a MyPanel object, which has the onSuccess method.
I find the scope config property very useful, so even though specifying the scope of a function is very natural in JavaScript, the fact that ExtJS made it so natural and easy deserves being noted. Well done ExtJS! - in Buttons
{ xtype: 'button', text: 'Save', handler: function(){ //do something on pressing the button }, scope: myScope //scope of the handler } - with Stores
new Ext.data.Store({ //...other config options autoLoad: { callback: function(){ ... }, scope: aScope //for the callback function after loading the store } }) - in listeners
new Ext.Panel({ listeners: { scope: window, //the scope of all listeners in this config show: function(){ ... }, afterrender: function(){ ...this is 'window' } } }) - in actions