CODEWITHSUNDEEP
javascriptextjs
Scott Rowley
Scott Rowley

Reputation: 484

Sencha Architect localstorage not working

I am brand new to Sencha Touch/Architect and trying to create my first store. I have the following items setup:

Store

Ext.define('InkStudio.store.MyStore', {
    extend: 'Ext.data.Store',

    requires: [
        'InkStudio.model.activityLog'
    ],

    config: {
        data: {
            entryID: 1,
            name: 'First',
            event: 'First event'
        },
        model: 'InkStudio.model.activityLog',
        storeId: 'MyStore',
        proxy: {
            type: 'localstorage',
            uniqueID: 'entryID'
        }
    }
});

Model

    Ext.define('InkStudio.model.activityLog', {
    extend: 'Ext.data.Model',

    config: {
        identifier: 'uuid',
        fields: [
            {
                name: 'entryID',
                type: 'auto'
            },
            {
                name: 'name',
                type: 'string'
            },
            {
                name: 'event',
                type: 'string'
            }
        ]
    }
});

Then I have a button with the following for a test. The button is working and I receive both "Success" messages but the data never actually shows up in the store when I look at it or cat the file for it.

var store=Ext.getStore('MyStore');
if(store.add({name: "KITTY", event: "Clicked on the register"})){
    console.log("Successfully added");
}else{
    console.log("Failed to add");   
}
if(store.sync()){ 
    console.log("Successfully synced");
}else
{
    console.log("Failed to sync");
}

Am I missing something else?

Upvotes: 0

Views: 335

Answers (1)

user800014
user800014

Reputation:

Use the data config is used only when you want fixed information in your view. The correct is:

Ext.define('InkStudio.store.MyStore', {
    extend: 'Ext.data.Store',

    requires: [
        'InkStudio.model.activityLog'
    ],

    config: {
        model: 'InkStudio.model.activityLog',
        storeId: 'MyStore',
        proxy: {
            type: 'localstorage',
            id: 'my-store-id'
        }
    }
});

EDIT The store methods are async, so you need to use the options to actually see the changes.

var record = Ext.create('InkStudio.model.activityLog');
...
//first we load our store.
store.load({
  callback: function(records, operation, success) {
    console.log('Store loaded...');
    //then we can add records
    store.add(record);
    store.sync({
      success: function(batch, options) {
        console.log("Record saved...");
      },
      failure : function(batch, options) {
        console.log("Error!");
      }
    });
  }
});

Upvotes: 2

Related Questions