如何以Y-m-d Ext JS 6格式发送日期

时间:2017-06-24 21:01:47

标签: extjs extjs6 extjs6-classic extjs6.2

我有一个网格。当我添加新的行脚本时,会自动以格式" Y-m-d"并且它的工作正常,Ext JS自动发送到服务器日期格式" 2017-06-24" (" Y-M-d&#34)。但是当我更新这个日期时,Ext JS以格式2017-06-24T00:00:00发送到服务器日期。 怎么了? 帮我发送到服务器" 2017-06-24"更新后的日期(" Y-m-d")。

Ext.require(['Ext.data.*', 'Ext.grid.*']);


    // Создаем model
    Ext.define('Users', {
        extend: 'Ext.data.Model',
        //idProperty: 'id',
        fields: [{
                name: 'id',
                type: 'int'
            }
        ]
    });

    Ext.onReady(function() {
        // Создаем store
        var store = Ext.create('Ext.data.Store', {
                autoLoad: true,
                autoSync: true,
                model: 'Users',
                proxy: {
                    type: 'ajax',
                    url: 'server.php',
                    api: {
                        create: 'server.php?action=create',
                        read: 'server.php?action=read',
                        update: 'server.php?action=update',
                        destroy: 'server.php?action=delete'
                    },
                    reader: {
                        type: 'json',
                        rootProperty: 'data'
                    },
                    writer: {
                        type: 'json',
                        encode: true,
                        rootProperty: 'dataUpdate',
                        allowSingle: false,
                        writeAllFields: true,
                        //root:'records'
                    },
                    actionMethods: {
                        create: 'GET',
                        read: 'GET',
                        update: 'GET',
                        destroy: 'GET'

                    }
                },
                listeners: {
                    write: function(store, operation) {
                        var record = operation.getRecords()[0],
                            name = Ext.String.capitalize(operation.action),
                            verb;


                        if (name == 'Destroy') {
                            verb = 'Destroyed';
                        } else {
                            verb = name + 'd';
                        }
                        //Ext.example.msg(name, Ext.String.format("{0} user: {1}", verb, record.getId()));

                    }
                }
            }


        );

        var grid = Ext.create('Ext.grid.Panel', {
            renderTo: document.body,
            //plugins: [rowEditing],
            // Редактирование
            plugins: {
                ptype: 'cellediting',
                clicksToEdit: 1
            },
            listeners: {
                edit: function() {

                }
            },
            width: 1000,
            height: 330,
            frame: true,
            title: 'Users',
            store: store,
            iconCls: 'icon-user',
            columns: [{
                    text: 'id',
                    width: 50,
                    sortable: true,
                    dataIndex: 'id',
                    renderer: function(v, meta, rec) {
                        return rec.phantom ? '' : v;
                    }
                },
                {
                    header: 'Дата',
                    width: 70,
                    // sortable: true,
                    dataIndex: 'date',
                    renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                    editor: {
                        completeOnEnter: false,
                        field: {
                            xtype: 'datefield',
                            dateFormat: 'd/m/Y',
                            allowBlank: false
                        }
                    }
                },
                {
                    header: 'Время начала',
                    width: 120,
                    // sortable: true,
                    dataIndex: 'time_start',
                    //format: 'H:i',
                    // Нужно для верного отображеия времени после редактирования в таблице
                    renderer: Ext.util.Format.dateRenderer('H:i'),
                    editor: {
                        completeOnEnter: false,
                        field: {
                            xtype: 'timefield',
                            format: 'H:i',
                            //name: 'timeStart1',
                            //fieldLabel: 'Time In',
                            minValue: '8:00',
                            maxValue: '20:00',
                            increment: 30,
                            anchor: '100%',
                            allowBlank: false
                        }
                    }
                }

            ],
            dockedItems: [{
                xtype: 'toolbar',
                items: [{
                    text: 'Add',
                    iconCls: 'icon-add',
                    handler: function() {
                        // Создаем новую задачу
                        // Для корректной работы с БД нужно задать ID новой строки, равной +1 от последней ID из таблицы.
                        var rec = new Users();
                        //console.log (x);("rec data= " + rec.id + " -- " + rec.data.id);
                        var idArr = grid.store.data.items;
                        var idValue = [];
                        for (var i = 0; i < idArr.length; i++) {
                            idValue.push(idArr[i].id);
                        }
                        idValue.sort(function(a, b) {
                            return a - b;
                        });
                        var maxId = idValue[idValue.length - 1];
                        console.log(maxId);
                        rec.id = maxId + 1;
                        rec.data.id = maxId + 1;

                        rec.date = Ext.Date.format(new Date(), 'Y-m-d');
                        rec.data.date = Ext.Date.format(new Date(), 'Y-m-d');

                        rec.time_start = Ext.Date.format(new Date(), '2008-01-01\\TH:i:s');
                        rec.data.time_start = Ext.Date.format(new Date(), '2008-01-01\\TH:i:s');
                        store.insert(0, rec);
                        //store.add(rac);
                        //grid.getView().refresh();
                        // rowEditing.startEdit(rec, 0);
                    }
                }, '-', {
                    itemId: 'delete',
                    text: 'Delete',
                    iconCls: 'icon-delete',
                    disabled: false,
                    handler: function() {
                        var selection = grid.getView().getSelectionModel().getSelection()[0];
                        if (confirm('Вы действительно хотите удалить задачу №' + selection.id + " ?")) {
                            // Удлаяем      
                            if (selection) {
                                store.remove(selection);
                            }
                        }
                    }
                }]
            }]
        });
    });

3 个答案:

答案 0 :(得分:0)

datefield xtype有一个submitFormat配置,您可以在其中指定要提交给服务器的日期格式字符串。

https://docs.sencha.com/extjs/6.2.0/classic/Ext.form.field.Date.html#cfg-submitFormat

更新:正如Selmaril在评论中提到的,这将进入您定义日期字段的部分。

                {
                    header: 'Дата',
                    width: 70,
                    // sortable: true,
                    dataIndex: 'date',
                    renderer: Ext.util.Format.dateRenderer('d/m/Y'),
                    editor: {
                        completeOnEnter: false,
                        field: {
                            xtype: 'datefield',
                            dateFormat: 'd/m/Y',
                            submitFormat: 'd/m/Y'
                            allowBlank: false                                
                        }
                    }
                }

答案 1 :(得分:0)

您正在使用模型。在该模型上,您有一个fields配置,您可以在其中定义哪些字段包含哪些数据ype,如果是日期,则应该以哪种格式提交给服务器。

fields:[{
    name: 'id',
    type: 'int'
},{
    name: 'date',
    type:'date',
    dateFormat:'Y-m-d'
}]

此外,我在您的代码中看到了其他一些红色标记:

  • 请勿使用record.date =record.data.date =在记录上设置日期。
  • 除非绝对必要,否则请勿使用Date.format()格式化日期。在内部,您应始终使用javascript日期,而不是字符串。在网格中使用xtype:'gridcolumn'并使用适当的格式(例如format:'d/m/Y')进行显示。

因此,例如,当以编程方式更新现有记录或在商店外创建新网格行或新记录时,请使用record.set('date', new Date());store.add({date:new Date()})Ext.create('Users',{date: new Date()})

答案 2 :(得分:0)

我在我的模型中使用dateWriteFormat: "Y-m-d",它完美地将美国经典日期发送到我的postgres后端。