extjsextjs6-classic

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


-- 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.


Solution

  • 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.