CODEWITHSUNDEEP
javascriptextjssencha-touch-2
Urban
Urban

Reputation: 2199

Problems with store syncing

What I'm trying to do:

To let the user be able to store data locally until he decides to upload it all. To achieve this, I am filling the data from a form into a model and then filling a store (sync) with this model. This store has a local storage proxy.
offlineStore.js: 

Ext.define('blahblah.store.offlineStore',{
extend:'Ext.data.Store',
config:{
    model:'blahblah.model.myModel',
    id: 'offlineRegisterStore',
    sorters:'xyz',
    grouper:function(record){
        return record.get('xyz')[0];
    },
    proxy: {
        type: 'localstorage',
        id: 'offlineRegisterStoreid'
    }
 ...

Now, when the user presses the sync button, I copy data from this offline store, to another store having a proxy that does the REST call:
OnlineStore:

   Ext.define('blahblah.store.upStore', {
     extend: 'Ext.data.Store',
     config: {
        model: 'blahblah.model.myModel',
        id: 'abc',
        sorters: 'xyz',
        grouper: function (record) {
          return record.get('xyz')[0];
        },
        proxy: {
        type: 'rest',
        url: HOST,
        headers: HEADERS,
        reader: {
            type: 'json'

        },
        writer: {
            type: 'json'
        }
    ...

The Problem:

Unfortunately, my online store is not even executing store.sync() after I add data from the offline store into it. As a result of which, no REST call is made. I realize that this happens when the store has unchanged data being synced. This was odd since I had added nothing to the online store prior to copying data into it from the offline store.

So I did a console.log on the online store right after I created it. I saw that this store already has the form data filled in it. And, I'm guessing this is why sync() is not executed, since I'm adding this same data back into it, just this time, from the offline store. I'm puzzled about how and from where did this online store get its data.
I also tried store.removeAll() before I added anything from the offline store into the online store but it had no effect on the store content.

Do tell if you need to see more code.

Edit 1: How I'm filling the the offline store- I create an instance of my model, fill it up with the form data and execute offlineStore.add(myModel). After this I do offlineStore.sync(). This is how I fill my model with data: 

var myModel = Ext.create('blahblah.model.myDataModel',{  
    datafield1 = formdata1,
    datafield2 = formdata2
});

At what point do I check the online store:
When the user clicks the submit button of the form, I get the offline store and create online store. Surprisingly, I just observed that not only the online store, but even the offline store has the form data right when I getStored it. So basically the data enters the offline and online store even before I execute sync() on them or add the data-filled model? This confuses me even more.

Upvotes: 0

Views: 2706

Answers (2)

Urban
Urban

Reputation: 2199

Finally found a solution to my problem from the Sencha forums: setting record.phantom = true.

Before adding a record to the online store (from the offline store) I executed the above piece of code. Now, when the store synced, it considered the freshly added record as indeed a new record, and thus did the POST request.

I must also add that if you instead set record.dirty = true, then the store sent a PUT request instead of the POST.

Upvotes: 2

Wolfram
Wolfram

Reputation: 8052

When you are saying that you are "filling the data from a form into a model", I guess both stores get to that data as they are both bound to that model. At what point exactly do you check the online store and see the form data? Does it get updated on every keystroke inside the form?

Some thoughts on how to resolve this:

  • no Ext.data.Store for offline data - You may want to store the data in completely separated structures until the users submits it, some kind of custom form backing object instead of an offline store. This probably means to duplicate parts of the model but there certainly is a way to prevent that (something like defining the fields somewhere else and extending the ExtJS model and your custom object with them).

  • Override sync function and filter data - You could add a model property submitted and override the store's sync method to only sync those entries that have submitted===true. So locally you have all data in the store, but only transfer the approved data items to the server.

  • same store object - Do you happen to have the same store object under different names somehow? You are defining different stores with different IDs, but did you check that they in fact are different? It sounds as they would hold the same data at any time right now?!

Let me know if this helps.

Upvotes: 0

Related Questions