ExtJS -覆盖默认存储数据

Question

在ExtJS 6.2中，有一些默认数据的存储，我如何用数据库中的数据覆盖默认数据?

的例子:

var store = Ext.create('Ext.data.Store', {
fields: ['name', 'email', 'phone'],
data: [{
'name': 'Lisa',
"email": "[e-mail]",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "[e-mail]",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "[e-mail]",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "[e-mail]",
"phone": "555-222-1254"
}],
//idProperty: 'name',
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total'
}
}
});

然后，在我的数据库中Lisa实际上有电话号码"555-111-4321"，所以当我打电话给store.load()时，它会用"555-111-4321"覆盖Lisa的电话号码。

请参见提琴:https://fiddle.sencha.com/#view/editor&fiddle/3h05

Answer 1

可能有一个更优雅的解决方案，一些内置的ExtJS，但手动检查现有行并从原始存储中删除它们，然后再添加新的行。将这些行添加到您的代码末尾:

newStore = Ext.clone(store);
newStore.load({addRecords: true,
callback: function (records, operation, success) {
if (!success) return;
Ext.Array.each(records, function(record) {
const existing = store.findRecord('name', record.get('name'));
if (existing != null) {
store.remove(existing);
}
store.add(record);
});
}
});

Answer 2

我通过创建覆盖解决了这个问题:

Ext.define(null, {
override: 'Ext.data.ProxyStore',
privates: {
createImplicitModel(fields) {
//const me = this;
const modelCfg = {
extend  : this.implicitModel,
statics : { defaultProxy: 'memory' }
};
if (fields)    modelCfg.fields = fields;
// Add
if (this.idProperty)    modelCfg.idProperty = this.idProperty;
const model = Ext.define(null, modelCfg);
this.setModel(model);
const proxy = this.getProxy();
if (proxy) {
model.setProxy(proxy);
} else {
this.setProxy(model.getProxy());
}
}
},
load(options) {
if (typeof options === 'function') {
options = { callback: options };
} else {
options = options ? Ext.Object.chain(options) : {};
options = {...options, ...this.loadOptions};
}
this.pendingLoadOptions = options;
if (this.getAsynchronousLoad()) {
if (!this.loadTimer) {
this.loadTimer = Ext.asap(this.flushLoad, this);
}
} else {
this.flushLoad();
}
return this;
}
});

var store = Ext.create('Ext.data.Store', {
fields: ['ids','name','email', 'phone'
],
autoLoad: true,
loadOptions: {addRecords: true},
idProperty: 'name',
data: [{
'ids':1,
'name': 'Lisa',
"email": "[e-mail]",
"phone": "555-111-1224"
}, {
'ids':2,
'name': 'Homer',
"email": "[e-mail]",
"phone": "555-222-1244"
}],

proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items',
totalProperty: 'total'
}
}
});
Ext.create('Ext.grid.Grid', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name',
width: 200
}, {
text: 'Email',
dataIndex: 'email',
width: 250
}, {
text: 'Phone',
dataIndex: 'phone',
width: 120
}],
height: 200,
layout: 'fit',
fullscreen: true,
renderTo: Ext.getBody()
});
// store.load();
//store.load({addRecords: true});  // Keeps Homer but duplicates data

请参见提琴:https://fiddle.sencha.com/#fiddle/3h2v&view/editor

这允许您使用任何字段和字段类型作为ID，它与自动加载一起工作。

---

如果您只想使用id字段作为ID并且它是数字，那么这应该可以工作:https://fiddle.sencha.com/#fiddle/3h15&view/editor