CODEWITHSUNDEEP
javascriptextjscallbackextjs4.1extjs-stores
SharpCoder
SharpCoder

Reputation: 19163

Adding callback function to ExtJs store based on certain condition

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.

Upvotes: 0

Views: 4846

Answers (2)

Gururaj
Gururaj

Reputation: 539

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();
  }

Upvotes: 0

V G
V G

Reputation: 19002

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);
    }
})

Upvotes: 0

Related Questions