DarkKnightFan DarkKnightFan - 2 months ago 24
Javascript Question

ExtJs: Wait till store loads and then execute next statements

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

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 path callback as parameter callback is being executed right after data is being loaded.