title: How to wait until all stores are Sync in ExtJs?
body: <p>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.</p>
  
  <p>I wrote the code below:</p>
  
  <pre><code>$.when.apply(
      Ext.ComponentQuery.query('grid')
         .forEach(function(item) {
               if (item.getXType() == "grid") {
                  if (item.store.getNewRecords().length &gt; 0 || item.store.getUpdatedRecords().length &gt; 0 || item.store.getRemovedRecords().length &gt; 0) {
                      item.store.sync();
                   }
               }
  })).then(function (results) {
      //do something
  });
  </code></pre>
  
  <p>Problem is here that <code>store.sync()</code> not waiting for callback. </p>
  
  <p>What is the recommended way of doing this?</p>