Datefield in grid editor

Question

I have this code

{
                xtype: 'datecolumn',                    
                dataIndex: 'fechaNacimiento',
                itemId: 'fechaNacimiento',
                flex: 1,
                //hidden: true,
                //hideable: false,
                text: 'Fecha de Nacimiento',
                editor: {
                    xtype: 'datefield',
                    format: 'd/m/Y',
                    allowBlank:false,
                }
            },

Date is set in the grid as the format defined 'd/m/Y' 03/06/2018, but when I am trying to send that date to data base the format changes to '2018-03-06T00:00:00'.

I also set my model like this:

{name: 'fechaNacimiento', mapping: 'FECHA_NACIMIENTO', type: 'date', dateFormat: 'd/m/Y'}

I need to send the date in format: 'd/m/Y'. just like this: 03/06/2018

anyone knows why date is changing and how to fix this issue ?

Answer 1

You need to use convert config for model fields. Inside convert config you can return your desired output.

A function which converts the value provided by the Reader into the value that will be stored in the record. This method can be overridden by a derived class or set as a convert config.

If configured as null, then no conversion will be applied to the raw data property when this Field is read. This will increase performance. but you must ensure that the data is of the correct type and does not need converting.

Example of convert functions:

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    fields: ['name', {
        name: 'joindate',
        convert: function(value, record) {
            //if value is not defined then null return
            return value ? Ext.Date.format(value, 'd/m/Y') : null;
        }
    }]
});

In this FIDDLE, I have created a demo using grid, cellediting and datefiled. I hope this will help/guid you to achieve your requirement.

CODE SNIPPET

Ext.application({
    name: 'Fiddle',

    launch: function () {

        Ext.define('MyModel', {
            extend: 'Ext.data.Model',
            fields: ['name', {
                name: 'joindate',
                convert: function (value, r) {
                    //if value is not defined then null return
                    return value ? Ext.Date.format(value, 'd/m/Y') : null;
                }
            }]
        });

        Ext.create('Ext.data.Store', {
            storeId: 'myStore',
            model: 'MyModel',
            data: [{
                name: 'Lisa'
            }, {
                name: 'Bart'
            }, {
                name: 'Homer'
            }, {
                name: 'Marge'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'My Data',
            store: 'myStore',
            columns: [{
                header: 'Name',
                dataIndex: 'name',
                flex: 1,
                editor: 'textfield'
            }, {
                header: 'Join Date',
                dataIndex: 'joindate',
                //You can also use Ext.util.Format.dateRenderer('d/m/Y') for showing required date formate inside grid cell.
                // renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                flex: 1,
                editor: {
                    completeOnEnter: false,
                    field: {
                        xtype: 'datefield',
                        editable: false,
                        //The date format string which will be submitted to the server. The format must be valid according to Ext.Date#parse.
                        submitFormat: 'd/m/Y',
                        //The default date format string which can be overriden for localization support. The format must be valid according to Ext.Date#parse.
                        format: 'd/m/Y',
                        allowBlank: false
                    }
                }
            }],
            selModel: 'cellmodel',
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            renderTo: Ext.getBody(),
            tools: [{
                type: 'plus',
                handler: function () {
                    var grid = this.up('grid'),
                        store = grid.getStore(),
                        rec = Ext.create('MyModel', {
                            name: ''
                        }),
                        context;

                    store.add(rec);

                    //Get Ext.grid.CellContext of first cell using getColumns()[0]
                    context = grid.getView().getPosition(rec, grid.getColumns()[0])

                    //Start editing in first cell
                    grid.setActionableMode(true, context);
                }
            }],
            bbar: ['->', {
                text: 'Save Data',
                handler: function (btn) {
                    var store = this.up('grid').getStore();
                    store.each(rec => {
                        console.log(rec.data);
                    })
                }
            }]
        });
    }
});