ExtJS

Question

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

示例：

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'
        }
    }
});

然后，在我的数据库中，Lisa 实际上有 phone 号码“555-111-4321”，所以当我调用 store.load() 时，它将用“555-”覆盖 Lisa 的 phone 号码111-4321..

请参阅fiddle：https://fiddle.sencha.com/#view/editor&fiddle/3h05

Answer 1

可能有更优雅的解决方案，一些内置的 ExtJS，但在添加新行之前手动检查现有行并从原始存储中删除它们确实有效。将这些行添加到 fiddle 代码的末尾：

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": "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 data

请参阅fiddle：https://fiddle.sencha.com/#fiddle/3h2v&view/editor

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

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

ExtJS - 覆盖默认存储数据

ExtJS - Overwrite default store data

javascript

model

store