ExtJs - 无法将商店保存到 localStorage答案

【问题标题】：ExtJs - Unable to save a store to localStorageExtJs - 无法将商店保存到 localStorage
【发布时间】：2015-06-09 14:14:37
【问题描述】：

我有一个带有本地存储代理的商店，但我无法保存数据。代码很简单：

onToolbarTicketsadd: function(me){
    var tickets = this.getStore('Tickets');
    tickets.add({id: 1, name: 'new'})
    console.log(tickets.getById(1), tickets.count())
    tickets.sync({callback: function(){console.log('synched')}})
},

票被添加到商店，正如第一个console.log 所证明的那样，但sync() 命令不起作用。 localStorage 检查器只显示一个空条目Tickets: ''，并且callback 函数也不会被调用。

我错过了什么？本地存储代理需要什么才能工作？

注意：问题不在于浏览器：我使用的是最新的 Chrome 和 Firefox。

这是商店和模型的代码：

Ext.define('App.store.Tickets', {
    extend: 'Ext.data.Store',
    model: 'App.model.Ticket',
    proxy: {
        type: 'localstorage',
        id: 'Tickets'
    }
});

Ext.define('App.model.Ticket', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});

问题的演示是here。

【问题讨论】：

你的演示链接好像坏了，你能提供一个小提琴吗？这种行为似乎很奇怪，因为它是如此基本
不，它没有坏，只是加载需要很长时间。好吧，我找到了解决方案...

标签： extjs proxy local-storage extjs4.2 extjs-stores

【解决方案1】：

这花了我很多时间才找到。问题在于 Extjs 确定何时需要同步记录的方式：phantom 属性。

要向商店添加新记录，您不得提供id。这不行（因为设置了id，记录不会被标记为phantom，也不会被同步）：

store.add({id: 1, name: 'new'})
store.sync()

这将起作用：

store.add({name: 'new'})
store.sync()

还有一种可能的解决方法，即在添加记录后设置phantom 属性。当id 具有某种意义并且不仅仅是一个自动递增值时，这可能是必要的：

Ext.Array.each(store.add({id: 1, name: 'new'}), function(record){
    record.phantom = true
});
store.sync()

Extjs.data.Model.phantom 提到了这个问题：任何将真实数据库 pk 设置为 id 属性的记录都不是幻影——它是真实的。
很明显，这句话不一定是真的，就像上面第一个代码 sn-p 中一样，但是由于 Extjs 4.2 假定它始终为真，所以出现了错误。

我希望这个解释可以节省一些人的工作时间。它会为我节省一天的时间。

【讨论】：

你是对的@Lorenz，问题是 id 属性。但是，您的解决方法并不好，幻象是您永远不应该修改的内部字段。如果 id 属性很重要，那么模型应该定义一个不同的 id 属性在内部使用。看看模型文档。

【解决方案2】：

如果您想将 id 专门用于您自己的字段名称，然后手动将模型上的 idProperty 设置为其他名称似乎可以解决问题 - 请参阅此 working demo。但请注意，如果需要，您必须在属性上强制执行您自己的唯一性。

Ext.define('MyModel', {
    extend: 'Ext.data.Model',
    idProperty: '_id',  // <-- here 
    fields: [
        {name: 'id', type: 'int'},
        {name: 'name', type: 'string'}
    ]
});

【讨论】：