Extjs - How to access/modify the data before the Ext.data.Batch starts

294 Views Asked by At

-- Extjs - 6.6.0, Extjs Grid with Cell Editing plugin, record save operation to the server

There is a grid in my application interface with a proper store and model attached to the store. The grid has a date column with a date editor with the render format as 'd-M-Y' and the date value to submit to the server is 'Y-m-d'. During the save operation through a batch start with the session, I am unable to access the data to modify the date format to 'Y-m-d' and is being submitted as 'd-M-Y' which causing an issue.

Can anyone please provide the information on accessing/modifying the data before the Ext.Data.Batch starts.

Note:

  1. I cannot replace the batch with Ajax call.
  2. I already tried dateWriteFormat for the Model class as well.
  3. The date display & submit formats must be 'd-M-Y' & 'Y-m-d'.
  4. I cannot post the code as it is too large.

Any sort of help would be much appreciated.

1

There are 1 best solutions below

1
Dinkheller On BEST ANSWER

There are a couple of ways.

FIELD

You might want to edit the Model of the store via serialize.

Ext.define('MyApp.model.Users', {
    extend: 'Ciss.data.Model',

    fields: [{
        name: 'BirthDate',
        type: 'date',
        dateFormat: 'd m Y',        // how the date format comes from the server
        serialize: function (val) {
            return Ext.Date.format(val, 'Y-m-d');
        }
    }];
});

WRITER

You can use the writer using the dateFormat

writer: {
    type: 'json',
    dateFormat: 'Y-m-d',
    writeAllFields: true
}

while your field should be of the type date, all the time

If you still need more control you can use the transform method.

Ext.create('Ext.data.Store', {
    model: 'User',
    proxy: {
        type: 'ajax',
        url : 'users.json',
        writer: {
            type: 'json',
            transform: {
                fn: function(data, request) {
                    // do some manipulation of the unserialized data object
                    return data;
                },
                scope: this
            }
        }
    },
});

EVENT

You can use the store beforesync event

LAST HOPE If all this does not work for you you can grab every request before it's send.