网格编辑器中的日期字段

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 配置中，您可以 return 您想要的输出。

一个函数，它将 Reader 提供的值转换为将存储在记录中的值。此方法可以被派生的 class 覆盖或设置为 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 创建了一个演示。我希望这会 help/guid 你达到你的要求。

代码片段

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

网格编辑器中的日期字段

Datefield in grid editor

javascript

format

extjs

datefield