Question

How do I call a beforeSave method (i.e. a method that is triggered every time a model record is added, updated and/or saved) for a Sencha Touch MVC Model?

Answer 1

(assuming Sencha Touch 1.x)

As far as I know there is no event that tells you that the data WILL be changed but hasn’t changed yet.
However, the post-change event is called ‘datachanged’. If you just need to know that your data is changed (and not BEFORE it is changed), add a listener for this ‘datachanged’ event and discard the rest that I have written.

However, if you really need a ‘beforedatachanged’ event, read on:

You could implement your own event(and call it ‘beforedatachanged’) by using Ext.override to override the Sencha behavior and trigger your new event before the data is actually changed.

It might sound difficult, but it really is not:

First check this out:
http://docs.sencha.com/touch/1-1/source/AbstractStore.html
Go and find “onBatchComplete”, you’ll see that it fires the ‘datachanged’ event:

/**
 * @private
 * Attached as the 'complete' event listener to a proxy's Batch object. Iterates over the batch operations
 * and updates the Store's internal data MixedCollection.
 */
onBatchComplete: function(batch, operation) {
    var operations = batch.operations,
        length = operations.length,
        i;

    this.suspendEvents();

    for (i = 0; i < length; i++) {
        this.onProxyWrite(operations[i]);
    }

    this.resumeEvents();

    this.fireEvent('datachanged', this);
},

Before the “this.suspendEvents();” you have to fire your own custom event, because after that, the operations are executed.

To override this, write something like this in your application:

Ext.override(Ext.data.AbstractStore,
{
    onBatchComplete: function(batch, operation)
    {
        var operations = batch.operations,
            length = operations.length,
            i;

        this.fireEvent('beforedatachanged', this);

        this.suspendEvents();

        for (i = 0; i < length; i++) {
            this.onProxyWrite(operations[i]);
        }

        this.resumeEvents();

        this.fireEvent('datachanged', this);
    },
});

Then you need to listen to the beforedatachanged event in your model code and you’re all set.