ExtJs: Wait till store loads and then execute next statements

Question

I have a store which I need to load and perform operations on the records inside the code after the store gets loaded. But since the execution is asynchronous, the statements after store load gets executed even before the store completes loading completely.

How can I halt the execution till the time the store finishes loading.

Below is the code:

var fieldsStore = new Ext.create('Ext.data.Store', {
model : 'FieldsModel',
proxy : {
    type : 'ajax',
    url : 'queryBuilder_getQueryDetails',
    extraParams : {
        queryID : queryID
    },
    reader : {
        type : 'json'
    }
},
listeners : {
    load : function(store, records, successful, operation, eOpts) {
        if (successful) {
            records.forEach(function(rec) {
                // default settings: if datatype is INTEGER - SUM
                if (rec.get('fieldType') == 'INTEGER') {
                    rec.set('fieldSettingKey', 'SUM');
                    rec.set('fieldSettingValue', 'Sum');
                } else {
                    // else select ROWHEADER by default
                    rec.set('fieldSettingKey', 'ROWHEADER');
                    rec.set('fieldSettingValue', 'Row Header');
                }

            });

            store.commitChanges();
        }
    }
}
});

function loadPivotDefinition(pivotDef) {
// load query in combo
Ext.getCmp('queryListCombo').select(pivotDef.get('queryID'));
// set params as the query id to fetch fields
fieldsStore.proxy.extraParams.queryID = pivotDef.get('queryID');
// load fields store
fieldsStore.load();

 // THIS IS WHERE I WANT TO CODE TO HALT AND CHECK IF THE STORE HAS COMPLETED LOADING.
// load field data (checked, data binding )
debugger;
pivotDef.get('rowHeaders').forEach(
        function(rowRecord) {
            var storeRecord = fieldsStore.findRecord('fieldName',
                    rowRecord.fieldName, 0, false, true, true);
            storeRecord.set('checked', rowRecord.checked);
            storeRecord.set('fieldSettingKey', rowRecord.fieldSettingKey);
            storeRecord.set('fieldSettingValue',
                    rowRecord.fieldSettingValue);
        });
}

Answer 1

store.load may take a callback as parameter:

fieldsStore.load(function() {
    // THIS IS WHERE I WANT TO CODE TO HALT AND CHECK IF THE STORE HAS COMPLETED LOADING.
    // load field data (checked, data binding )
    debugger;
    pivotDef.get('rowHeaders').forEach(/*...*/);
});

When You pass callback as parameter callback is being executed right after data is being loaded.