View Full Version : [4.0.1] No Way To Attach Listener to Ext.data.Batch "complete" event.

2 Jun 2011, 5:41 AM
How can I tell when store.sync() completes so that I can, say, hide a grid panel mask?

I would expect that store would fire a "sync_complete" event (hmmm, but what about the case that there were errors as well?). Or better yet, how about a store config option like "syncMask: true" where I wouldn't have to write any code to manage the gridpanel mask during a sync() operation?

I have an editor grid with working CRUD with batchActions: true on its Ajax proxy.

When user clicks the save button, I do this:

Ext.get('grid-priority-items').mask('saving...'); // show mask
store.sync(); // execute all pending batch actions (creates, updates, deletes).

But how/where do I listen in on the Ext.data.Batch "complete" event so that I can hide the mask (Ext.get('grid-priority-items').unmask()?

Posted as bug per Saki's suggestion: http://www.sencha.com/forum/showthread.php?135498-How-to-Hide-Grid-Mask-after-store.sync()-completes&p=609035&viewfull=1#post609035

7 Jun 2011, 7:18 AM
Can this be confirmed as a bug? If not, what is the proper way to deal with this?


17 Oct 2011, 11:34 PM
I'm going to subscribe this issue. I have the same as poster's with 4.0.2a.

Description is: I have an Ext.data.Store using "api" in config filled all CRUD subproperties on that. I doesn't find a way to my app knows if a store.sync() call batched and completed all CRUD operations.

I think this is possible a conceptional bug, or a documentational bug, or a tutorial bug, or a tipical "RTFM bug" on my side.

Possible workarond:
Use this patch before any store (I use this on my "overrides.js" that is requested with a <script> tag after "ext.js" requested but before the application's "app.js" requested):

// Supports reloading a store after all batch operation complete.
Ext.require('Ext.data.AbstractStore', function(){
Ext.override(Ext.data.AbstractStore, {
constructor: function(config)
onBatchComplete: function(batch, operation)
this.fireEvent('batchcomplete', this);

You must use store.batchUpdateMode with value 'complete' and subscribe the store's brand new batchcomplete event listener which will fires after all operations done. On that listener you can reload the store with simple store.load() call. My batchcomplete listener have only one argument which is the store that fires the event.

For example:

Ext.define('Categories', { extend: 'Ext.data.Store',
model: 'Category',
storeId: 'Categories',
batchUpdateMode: 'complete',
autoLoad: true,
proxy: {
type: 'ajax',
batchOrder: 'destroy,create,update',
api: {
create: 'json.php?q=Category/Add',
read: 'json.php?q=Category/GetList',
update: 'json.php?q=Category/Set',
destroy: 'json.php?q=Category/Remove'
reader: {
type: 'json',
root: 'data'
writer: {
type: 'json',
root: 'data',
allowSingle: false,
encode: true
listeners: {
batchcomplete: function(store)

This works fine on my ExtJS 4.0.2a application.


28 Oct 2011, 8:00 AM
Should anyone assign a flag to this issue or confirm us if that is not a bug and Ext has an official solution for the problem described?