PDA

View Full Version : Store load callback to controller function (scope?)



jcamozzi
16 Apr 2012, 5:45 AM
Hi All,

I'm having trouble figuring out how to get what seems like basic functionality to work. I also am not sure if how I'm doing this is appropriate.

So, I have a store to load data, and a function I want to trigger after the data is loaded. This is all triggered from a button click. My Controller is set up to listen for this click, then to get the store and trigger the load function:



Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
stores: [
'sampleStore'
]
,


init: function(application) {
this.control ({
'#mybutton': {
click : function() {
var myStore = this.getStore('sampleStore');
myStore.load({
callback : function() {
//wrong scope
this.getAverageData();
}
});
}
}


});
},


getAverageData: function() {
//do stuff
}


});


However, the scope of "this" in the callback refers to the store. But I want it to point to the function in the controller. I have a feeling I'm approaching this wrong, but I'm not certain what the "right" way to go is. Essentially I want to do the following on button click:
Load the store
After load trigger a controller function
Within that function use other functions / properties in the controller
But even if I do


callback: this.getAverageData


The scope is still for the store. I'm also wondering if perhaps this function should really go someplace else. Is "fat model skinny controller" a concept that works with extjs MVC? Would it make sense if this function were in the model instead?

As a side note, even using a listener (store.on('load', function, this)) seems to have the same issue.

Thanks for the help!

vietits
16 Apr 2012, 5:55 AM
Try this


init: function(application) {
this.control ({
'#mybutton': {
click : function() {
var myStore = this.getStore('sampleStore');
myStore.load({
scope: this,
callback : function() {
//wrong scope
this.getAverageData();
}
});
}
}
});
},

or using 'me' variable


init: function(application) {
var me = this;
me.control ({
'#mybutton': {
click : function() {
var myStore = me.getStore('sampleStore');
myStore.load({
callback : function() {
//wrong scope
me.getAverageData();
}
});
}
}
});
},

jcamozzi
16 Apr 2012, 6:11 AM
@vietits : brilliant.

That's exactly what I needed. Side note, you answered more quickly (and correctly) than the "premium support".

Thanks!

kidmanmatch
28 May 2013, 3:25 AM
Thanks