2017-06-24 110 views
0

我有一个网格。当我添加新的行脚本时,自动将日期格式设置为“Y-m-d”并且其工作正常,Ext JS自动发送格式为“2017-06-24”(“Y-m-d”)的服务器日期。但是当我更新这个日期时,Ext JS以格式2017-06-24T00:00:00发送到服务器日期。 什么错了? 帮我更新后发送到服务器“2017-06-24”日期(“Y-m-d”)。如何以格式Y-m-d发送日期Ext JS 6

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

回答

0

datefield的xtype有submitFormat配置,您可以指定日期格式字符串提交给服​​务器。

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

更新:由于Selmaril在评论中提到,这正好到您定义的DateField部分。

   { 
        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         
         } 
        } 
       } 
+0

请教如何在我的情况下使用'submitFormat'? – Masquitos

+1

我认为凯文含义: 编辑:{ completeOnEnter:假, 字段:{ 的xtype: '的DateField', DATEFORMAT: 'D/M/Y', submitFormat: 'D/M/Y', allowBlank:false } } – Selmaril

0

您正在使用模型。在该模型中,您有一个fields配置,您可以在其中定义哪些字段包含哪些数据类型,并且在日期的情况下,应该将其格式提交给服务器。

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()})

0

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