How to add sync callbacks to store in ExtJS

Question

I have a store which I want to sync manually everytime certain actions are done.

I've seen this question and this one too.

What I'd like to know is if there is a way to establish a default sync callback functions on the store configurations.

I know I can do something like this:

store.sync({
        success: function(batch, options) {
            console.log('ok');
        },
        failure: function(batch, options) {
            console.log('not ok');
        }
    });

But I want to define the callbacks one time in the store itself and then I would just call store.sync();

Here is an example of the store I'm working with:

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    alias: 'store.MyStore',
    model: 'MyApp.model.MyModel',
    autoLoad: true,
    proxy: {
        type: 'rest',
        url: '../../api/myEndPoint',
        noCache: false,
        reader: {
            type: 'json',
            rootProperty: 'data',
            successProperty: 'success',
            totalProperty: 'total'
        },
        actionMethods: {
            read: 'GET',
            destroy: 'DELETE'
        },
        extraParams: {
            type: 'aux'
        }
    },
});

score 1 · Answer 1 · answered May 13 '20 at 12:37

If there is a way to achieve what you want through the means of the Framework I could not find it.

There is always another option, you can wrap the sync in to a function and call that function every time you want to sync with these particular callbacks:

function sync({
    success = (batch, options) => console.log('ok'),
    failure = (batch, options) => console.log('not ok')
} = {}) {
    store.sync({success, failure});
}

You can change the default functions in parameters by passing in parameters:

// default paramters will be used
sync();

// just one parameter
sync({
  failure: () => {
    console.log('new failure handler');
  }
});

// both parameters
sync({
  success: () => {
    console.log('new success handler');
  },
  failure: () => {
    console.log('new failure handler');
  }
});

Consider that if the default callbacks for the store will ever be implemented this solution would likely be considered a "hack". Going to the frameworks own solution would be a better idea.

score 1 · Answer 2 · answered May 14 '20 at 08:11

I would solve this issue with an override of the store's sync method.

Sync is basically calling the proxy's batch method that supports success and failure callbacks. So if you set for example syncSuccess and syncFailure callbacks in your store, they will be called only after syncing the store.

Notes:

I tested the solution on version 7.1.0. Check for differences in the sync methods for your version
You need to add extra logic for the case when the callbacks are not defined on the store

Ext.define('Overrides.data.Store', {
    override: 'Ext.data.Store',

    sync: function(options) {
        var me = this,
            operations = {},
            toCreate = me.getNewRecords(),
            toUpdate = me.getUpdatedRecords(),
            toDestroy = me.getRemovedRecords(),
            needsSync = false;

        //<debug>
        if (me.isSyncing) {
            Ext.log.warn('Sync called while a sync operation is in progress. ' +
                         'Consider configuring autoSync as false.');
        }
        //</debug>

        me.needsSync = false;

        if (toCreate.length > 0) {
            operations.create = toCreate;
            needsSync = true;
        }

        if (toUpdate.length > 0) {
            operations.update = toUpdate;
            needsSync = true;
        }

        if (toDestroy.length > 0) {
            operations.destroy = toDestroy;
            needsSync = true;
        }

        if (needsSync && me.fireEvent('beforesync', operations) !== false) {
            me.isSyncing = true;

            options = options || {};

            me.proxy.batch(Ext.apply(options, {
                operations: operations,
                listeners: me.getBatchListeners(),
                $destroyOwner: me,
                success: me.syncSuccess,
                failure: me.syncFailure
            }));
        }

        return me;
    }
});

How to add sync callbacks to store in ExtJS

2 Answers2