Изменение хранилища данных при перезапуске приложения

Question

Я создал веб-приложение ExtJS. У меня есть файл JSON с некоторыми данными. Я создал хранилище данных и загрузил данные из JSON. Я также связываю хранилище данных с сеткой. Сетка отлично отображает данные.

Теперь я хотел обновить некоторый элемент в сетке, но так, чтобы и данные в json обновлялись.

Я использовал следующий код, когда кто-то нажимает кнопку:

var grid = Ext.getCmp('PersonListing'); 
var store = Ext.getStore('PersonDataStore'); 
store.each(function(record,idx){ 
     val = record.get('Name'); 
     if(val == "Jon"){ 
     record.set('Name','David'); 
     } 

     record.commit(); 
}); 
console.log(store); 
grid.reconfigure(store); 

Теперь, как только этот код выполняет, я могу видеть имя изменилось в сетке данных. Но если я обновляю приложение или перезагружаю его, изменение будет потеряно. Данные в json-файле не изменяются. Почему это происходит? Как я могу реализовать это, чтобы изменения сохранялись?

---

Вот код магазина

Ext.define('PersonListing.store.PersonDataStore', { 
    extend: 'Ext.data.Store', 
    alias: 'store.personstore', 

    requires: [ 
     'PersonListing.model.PersonData', 
     'Ext.data.proxy.Ajax', 
     'Ext.data.reader.Json' 
    ], 

    constructor: function(cfg) { 
     var me = this; 
     cfg = cfg || {}; 
     me.callParent([Ext.apply({ 
      storeId: 'PersonDataStore', 
      autoLoad: true, 
      model: 'PersonListing.model.PersonData', 
      proxy: { 
       type: 'ajax', 
       url: 'data/people.json', 
       reader: { 
        type: 'json', 
        rootProperty: 'data' 
       } 
      } 
     }, cfg)]); 
    } 
}); 

Answer 1

Сервер приложений должен выполнять все операторы CRUD, в частности обработчик POST запроса для data/people.json маршрута.

По умолчанию Ajax Proxy использует следующие методы HTTP для CRUD:

{create: 'POST', read: 'GET', update: 'POST', destroy: 'POST'}

Если вы хотите изменить это поведение, установите actionMethods свойство.

http://docs.sencha.com/extjs/6.0/6.0.1-modern/#!/api/Ext.data.proxy.Ajax

Из Комментарии:

Чтобы использовать локальный прокси-сервер для хранения установить тип прокси для localstorage:

constructor: function(cfg) { 
    var me = this; 
    cfg = cfg || {}; 
    me.callParent([Ext.apply({ 
     storeId: 'PersonDataStore', 
     autoLoad: true, 
     model: 'PersonListing.model.PersonData', 
     proxy: { 
      type: 'localstorage', 
     } 
    }, cfg)]); 
} 

Для инициализации LocalStorage с вашим JSON, сделать запрос Ajax на начать и установить данные хранилища в запрос.

// Modify to match your JSON format 
Ext.Ajax.request({ 
     url: 'data/people.json', 
     success: function(response){ 
     var responseObj = Ext.decode(response.responseText); 
     var store = Ext.getStore('PersonDataStore'); 
     Ext.each(responseObj, function(object) { 

      // assumes a specific type of response object 
      var record = Ext.create('PersonListing.model.PersonData', object);       
      store.add(record);        
     }); 
     store.sync(); 
     } 
});