Question

我创建了一个ExtJS Web应用程序。我有一个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代理使用以下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)]);
}

要使用您的JSON初始化localstorage，请在开始时发出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();
       }
 });

重新启动应用程序时数据存储的更改丢失

1 个答案: