网格编辑器中的日期字段

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/2018，但是当我尝试将该日期发送到数据库时，格式更改为"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中，您可以返回所需的输出。

将

读取器提供的值转换为将存储在记录中的值的函数。此方法可以由派生类重写或设置为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;
        }
    }]
});

在这个小提琴中，我创建了一个使用 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);
                    })
                }
            }]
        });
    }
});