En ExtJS 6.2, al tener una tienda con algunos datos predeterminados, ¿cómo puedo sobrescribir los datos predeterminados con datos de una base de datos?
Ejemplo:
var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], data: [{ 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" }, { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" }, { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }, { 'name': 'Marge', "email": "marge@simpsons.com", "phone": "555-222-1254" }], //idProperty: 'name', proxy: { type: 'ajax', url: 'data1.json', reader: { type: 'json', rootProperty: 'items', totalProperty: 'total' } } }); Luego, en mi base de datos, Lisa tiene el número de teléfono "555-111-4321", así que cuando llamo a store.load() sobrescribirá el número de teléfono de Lisa con "555-111-4321".
Consulte el violín: https://fiddle.sencha.com/#view/editor&fiddle/3h05
Podría haber una solución más elegante, algo ExtJS incorporado, pero verificar manualmente las filas existentes y eliminarlas de la tienda original, antes de agregar la nueva, funciona. Agregue estas líneas al final de su código de violín:
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); }); } });Resolví este problema creando anulaciones:
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": "lisa@simpsons.com", "phone": "555-111-1224" }, { 'ids':2, 'name': 'Homer', "email": "home@simpsons.com", "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 dataConsulte el violín: https://fiddle.sencha.com/#fiddle/3h2v&view/editor
Esto le permite usar cualquier campo y tipo de campo como ID, funciona con la carga automática activada.
Si solo desea usar el campo de id como ID y es numérico, entonces esto debería funcionar: https://fiddle.sencha.com/#fiddle/3h15&view/editor