Can't access localstorage when offline?

[riyaad]

Hi all,

I'm hoping someone can tell me where I'm going wrong with this ST 2.1 app.
I'm unable to 'save' my data to my localstorage for some reason. When going offline, the offline store's empty

CACHE MANIFEST
# 16.212


index.html
#app/localstore.js
lib/sencha-touch-all-debug.js
css/apple.css
css/next24.css


NETWORK:
*

Ext.application({


    name: 'Next24',


    launch: function() {


        Ext.define('Movies',{
            extend: 'Ext.data.Model',
            config: {
                idProperty: 'slotid',
                fields:[
                    'slotid',
                    'title',
                    'summary'
                ]
            }
        });


        var onlineStore = Ext.create('Ext.data.Store', {
            model: 'Movies',
            storeId: 'online',
            autoLoad: false,
            proxy: {
                type: 'jsonp',
                timeout: 10000,
                url: 'http://next24.tv/getdata',
                reader: {
                    type: 'json',
                    rootProperty: 'MovieSchedule'
                }
            },
            listeners: {
                load: function() {
                    if (navigator.onLine) {
                        Ext.getStore('offline').getProxy().clear();
                        this.each(function(record){
                            offlineStore.add(record.data);
                        });
                        Ext.getStore('offline').sync();
                    }
                    else {
                        //offlineStore.load();
                    }
                    console.log('Online Store Loaded with ' + onlineStore.getCount() + ' records, Offline Store has: ' + offlineStore.getCount());
                }
            }
        });


        var offlineStore = Ext.create('Ext.data.Store', {
            model: 'Movies',
            storeId: 'offline',
            autoLoad: false,
            proxy: {
                type: 'localstorage',
                id: 'Next24-Offline'
            },
            listeners: {
                load: function(s) {
                    console.log('offlineStore has ' + s.getCount() + ' items')
                }
            }
        });


        var schedule = Ext.create('Ext.DataView', {
            fullscreen: true,
            itemTpl: '{title}: {summary}',
            store: 'offline',


            scrollable : {
                direction: 'vertical',
                directionLock: true
            },


            listeners: {
                initialize: function() {
                    var onlineProxy = onlineStore.getProxy();
                    onlineProxy.setExtraParams({
                        bouquet: 'dstv'
                    });
                    onlineStore.load();
                },
                painted: function() {
                    console.log('PAINTED ' + offlineStore.getCount());
                }
            }


        });


    }
})

Any help, greatly appreciated.

[JRS]

How about putting a console log where offline store data is getting loaded to see if the data is being loaded into the offline store?

Also, is the offline store created - before it is being loaded?

Good luck
JRS

[riyaad]

Hi JRS,

Thank you for the response.
I've changed my code to reflect this below:

        else {
            schedule.setStore(offlineStore);
            console.log('Loading offlineStore');
            offlineStore.load()
        }

When disconnecting, I definitely go into this block of code.

The output is

Loading offlineStore localstore.js:83
offlineStore when not connected 0 localstore.js:51

I'm assuming that the store already exists (at this offline point) when its loaded.

Not quite sure where I'm going wrong here. Notice anything?

[hermanvandermaas]

As a first step, I would check if anything is actually saved in your localStorage, after running your app online. In the Chrome web inspector the localStorage of the current page can be viewed by clicking 'Resources'. See https://developers.google.com/chrome...docs/resources

I'm not sure but there may be a scope problem in your code below.

this.each(function(record){
    offlineStore.add(record.data);
});

What does "this" refer to? You could console.log(this). To avoid scoping errors you could change the code like this:

load: function( thisStore, records, successful, operation, eOpts ) {
    if (navigator.onLine) {
        Ext.getStore('offline').getProxy().clear();
        this.each(function(record) {
            offlineStore.add(record.data);
        });
        Ext.getStore('offline').sync();
    }
    else {
        //offlineStore.load();
    }
    console.log('Online Store Loaded with ' + onlineStore.getCount() + ' records, Offline Store has: ' + offlineStore.getCount());
}

I only changed the first line to add the arguments that are passed when the load event occurs. The first argument is thisStore (any parameter name will do, except 'this'), which refers to the store that the load event occurred on.