网格编辑器中的日期字段

Question

我有这个代码

{
                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,
                }
            },

日期在网格中设置为'd / m / Y'03 / 06/201定义的格式，但是当我尝试将该日期发送到数据库时，格式更改为'2018-03-06T00：00：00' 。

我也设置了这样的模型：

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

我需要以格式发送日期：'d / m / Y'。就像这样：03/06/2018

有谁知道为什么日期在变化以及如何解决这个问题？

Answer 1

您需要将convert配置用于模型字段。在convert配置中，您可以返回所需的输出。

一种函数，它将Reader提供的值转换为将存储在记录中的值。此方法可以由派生类重写或设置为convert配置。

如果配置为null，则在读取此字段时，不会对原始数据属性应用任何转换。这将提高性能。但您必须确保数据类型正确且无需转换。

转换函数示例：

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;
        }
    }]
});

在这个FIDDLE中，我使用grid，cellediting和datefiled创建了一个演示。我希望这能帮助/指导您实现您的要求。

代码链

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);
                    })
                }
            }]
        });
    }
});