Delay required in between the execution of two statements

Question

i am working with extjs 4.2 and at one place i am loading the store object like this :

var  userDetailStore = Ext.create('Ext.data.Store', {
    model : 'Person.DetailsModel',
    autoLoad : true,

    proxy : {
        type : 'ajax',
        method : 'POST',
        url : 'getValueAction.action',
        reader : {
            type : 'json',
            root : 'details'
        },
        writer : {
            type : 'json',
            root : 'details'
        }
    },
    fields : ['id','loginName','referenceId' ,'name']
});//Here I load the store which will definitely contain a list of values.

and in the very next line i want to get the referenceId of the first value from the store object like this

var empId =  userDetailStore.getAt(0).get('referenceId')

and i am getting the error because till now the getCount() of the store object userDetailStore is giving me zero.But if i write an alert statement like alert('loading data'); before the line where i am getting the referenceId then the code works fine.The line userDetailStore.getCount() is giving me the exact value.

So i think some kind of delay is required between the loading the store and then using the store but I don't want an alert to show.I have even used the sleep() method in place of alert statement.But that is also not working.(BTW i don't even want to freeze the browser by executing the sleep())

Am i doing anything wrong while loading the store ?Is there any general way so that i will execute my code for using the store after the store is completely loaded ?

Somebody please help me out here...

Regards : Dev

Answer 1

use on load event to get the count after it's fully loaded

userDetailStore.on('load', function(){
                alert("Fully loaded");
            });

Answer 2

Vijay's answer is correct, but I thought I'd expand on the concept so that it's clear how this answer fits into what you're doing.

It's important to understand that when you make an AJAX request, the request is asynchronous. What this means in practical terms is that (as you found out) the remainder of your calling script does not wait for the asynchronous process to complete. Rather, the moment that you make an asynchronous request, your script is going to continue on it's merry way, executing the very next line of code.

So if you think about it, this makes perfect sense why you were not seeing a "count" in your store. While your async request was in the process of going to the server, getting the result, and then returning it to your request, the rest of your code kept right on executing, oblivious to what was happening in the async request (and this is precisely why async requests are powerful and awesome).

This is also why adding the alert seemed to "fix" your problem. When you call alert(), you literally halt execution of your script at the point of the alert. However, since your request for data was asynchronous, the time it took you to click the "OK" button of the alert (and hence resume processing of your script) gave the async request enough time to complete its lifecycle and update the original calling object.

In light of this, it's understandable why it would seem that a "delay" would be a desirable way to go, since the "delay" (or really, "halting") of the alert fixed your issue (at least on the surface). However, with async requests, you can never really know how long it's going to take to complete. If you have a large response, or there is unusual network latency, or any other number of issues...the hard-coded delay might work, but it also might not. Most maddening of all is that you'd never get consistent results, and would constantly be increasing the "delay" in order to accomodate all the things that could contribute to your async request taking longer and longer.

This is why the load() event of the store (and callbacks in general) is such a critical concept to understand and implement. By listening for the load() event, and then executing what code you need only within the context of that event firing, you can know for sure that the store's async request for data has completed.

If you've not used callbacks and event handling before, it does take a bit of getting used to in order to break out of the linear, procedural mindset. However, when dealing with AJAX requests in general, and event-driven frameworks like ExtJS 4 in particular, it's a concept you need to embrace in order to build effective and consistent applications.

Answer 3

Here set autoload to false and on some action you can use load() to load your store.

store.load({
    callback: function(records, operation, success) {
        // do something after the load finishes
    },
    scope: this
});