Adding callback function to ExtJs store based on certain condition

Question

I am using ExtJS 4.1. On the UI I have two buttons - btnOne & btnTwo. I have a store which I load after the click on both the buttons.

What I want: On click on any button, I still want to load the store but on click on btnOne, I want to load the store and when the store is loaded, I want to call a callback function. I cannot add the callback function on store load as I want to call the callback function only when btnOne is clicked.

I looked at the store load docs & load method actually allows a callback function.

store.load({
    scope: this,
    callback: function(records, operation, success) {
        // the operation object
        // contains all of the details of the load operation
        console.log(records);
    }
});

If the callback scope does not need to be set, a function can simply be passed:

store.load(function(records, operation, success) {
    console.log('loaded records');
});

But in my case the callback function is getting called before the store load.

I do not want to maintain a variable for same.

Please suggest.

Answer 1

The idea with a global variable is correct, just that you should not make the variable global, but local (to your controller). So, in your controller add two internal states for each clicked button, and in a callback on store load check those states:

//in your controller:
var ctrl = this;//ctrl == this == controller
store.on('load', function() {
    if (ctrl.firstButtonClicked && ctrl.secondButtonClicked) {
        mySecondCallback(withArguments);
    }
})

Answer 2

Have your callback defined, say onStoreLoad(), at Controller level, and one more function with a parameter (callback function pointer) specifically to load the store.

 onStoreLoadComplete: function() {}

 loadStore: function(callback) {
      store.load({callback: callback});
 }

On click of the button you can decide whether you wish to pass the callback function reference to this second function, which will solve your problem.

  onFirstButtonClick: function(){
        this.loadStore(this.callback);
  }

  onSecondButtonClick: function(){
        this.loadStore();
  }