javascriptextjspromisegridpanelextjs-stores

How to wait until all stores are Sync in ExtJs?


I have a list of grids that can change their data in form by end-user. Finally, I want to sync all the grids by clicking the button, then an operation is performed.

I wrote the code below:

$.when.apply(
    Ext.ComponentQuery.query('grid')
       .forEach(function(item) {
             if (item.getXType() == "grid") {
                if (item.store.getNewRecords().length > 0 || item.store.getUpdatedRecords().length > 0 || item.store.getRemovedRecords().length > 0) {
                    item.store.sync();
                 }
             }
})).then(function (results) {
    //do something
});

Problem is here that store.sync() not waiting for callback.

What is the recommended way of doing this?


Solution

  • I do it with Promise like this:

     // Sync grid data if exist dirty data
     Promise.all(
         Ext.ComponentQuery.query('grid')
         .map(grid => grid.getStore())
         .filter(s => (s.getNewRecords().length + s.getUpdatedRecords().length + s.getRemovedRecords().length) > 0)
         .map(s => new Promise((resolve, reject) => {
               s.sync({
                   success: () => { resolve(); },
                   failure: () => { reject(); }
               });
          }))
          ).then(() => {
               //do something
          });