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

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/

Из комментариев:

Чтобы использовать локальный прокси-сервер хранения, установите тип прокси в 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)]);
}

Чтобы инициализировать локальное хранилище с вашим 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();
       }
 });