title: Set grid id dynamicly from DB extjs6
body: <p>I have a grid.
  This grid gets data from postgres table.
  This table uses 4 users.
  The problem is if user B create and a row in a table with id:5, user A would not know it. So when user A create a row he should know what is the last id or create an a row and get back rows id.</p>
  
  <p>When i press "Add" button in a grid , extjs send "create" command to server, server retruns "success: true" and number of "id" new created row  in a postgres table.
  Id like to show and use this 'id' in my grid.
  For example if i add a row, and get "id: 19' from server, i have to create 19 row in and grid. When i`d like to edit this row, etxjs have to send to server update with 'id:19'.
  How to make it?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="/extjs/ext-6.2.0/build/classic/theme-classic/resources/theme-classic-all.css" /&gt;
      &lt;script type="text/javascript" src="/extjs/ext-6.2.0/build/ext.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/extjs/ext-6.2.0/build/ext-all.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          Ext.require(['Ext.data.*', 'Ext.grid.*']);
  
  
          // Создаем model
          Ext.define('Users', {
              extend: 'Ext.data.Model',
              idProperty: 'id',
              //idProperty: 'id',
              fields: [{
                      name: 'id',
                      type: 'int',
                      mapping: 'id'
                  },
                  //{name: 'date', type: 'date', dateFormat: 'Y-m-d'}
                  // {
                  //     name: 'time',
                  //     type: 'date',
                  //     dateFormat: 'H:i'
                  // },
              ]
          });
  
          // var occupationStore = Ext.create('Ext.data.Store', {
          //     fields: ['time'],
          //     data: [{
          //             time: 'CEO'
          //         },
          //         {
          //             time: 'Vicepresident'
          //         },
          //         {
          //             time: 'Marketing manager'
          //         },
          //     ]
          // });
  
          Ext.onReady(function() {
              // Создаем store
              var store = Ext.create('Ext.data.Store', {
                      autoLoad: true,
                      autoSync: true,
                      model: 'Users',
                      proxy: {
                          type: 'ajax',
                          url: 's.rakov.php',
                          api: {
                              create: 's.rakov.php?action=create',
                              read: 's.rakov.php?action=read',
                              update: 's.rakov.php?action=update',
                              destroy: 's.rakov.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: '99,3%',
                  height: 330,
                  frame: true,
                  title: 'Users',
                  store: store,
                  iconCls: 'icon-user',
                  columns: [{
                          text: 'id',
                          width: '2%',
                          sortable: true,
                          dataIndex: 'id',
                          renderer: function(v, meta, rec) {
                              return rec.phantom ? '' : v;
                          }
                      },
                       {
                          header: 'Задача',
                          width: '30%',
                          // sortable: true,
                          dataIndex: 'task',
                          editor: {
                              completeOnEnter: false,
                              field: {
                                  xtype: 'textfield',
                                  //name: 'timeStart1',
                                  //fieldLabel: 'Time In',
                                  anchor: '100%',
                                  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
                              }
                          }
                      },
                      {
                          header: 'Результат',
                          width: '30%',
                          // sortable: true,
                          dataIndex: 'task_result',
                          editor: {
                              completeOnEnter: false,
                              field: {
                                  xtype: 'textfield',
                                  //name: 'timeStart1',
                                  //fieldLabel: 'Time In',
                                  //anchor: '100%',
                                  allowBlank: false
                              }
                          }
                      },
  
                      {
                          header: 'Время конца',
                          width: 120,
                          // sortable: true,
                          dataIndex: 'time_end',
                          //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
                              }
                          }
                      },
                      {
                          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: 60,
                          // sortable: true,
                          dataIndex: 'time_duration'
                      },
  
                      // {
       //                    header: 'Тип задачи',
       //                    width: 120,
       //                    // sortable: true,
       //                    dataIndex: 'task_type',
       //                    editor: {
       //                        completeOnEnter: false,
       //                        field: {
       //                            xtype: 'combobox',
       //                            //name: 'timeStart1',
       //                            //fieldLabel: 'Time In',
       //                            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 &lt; 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\\T00:00:00');
                              rec.data.date = Ext.Date.format(new Date(), 'Y-m-d\\T00:00:00');
  
                              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);
                                  }
                              }
                          }
                      }]
                  }]
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="gridDiv"&gt;&lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>