Store with multiple fields problem with localstorage proxy

[raptors2k4]

I've got the following proxy used to display tweets:

        Ext.define('tweetModel',{
            extend:'Ext.data.Model',
            config:{
                fields: ['from_user', 'profile_image_url', 'text', 'created_at']
            }
        });

        Ext.define('TweetStore2', {
            extend: 'Ext.data.Store',
            config: {
                model: 'tweetModel',

                storeId: 'myTweetStore',
                pageSize: 20,
                autoLoad: true,
                autoSync: true,
                
                proxy: new Ext.data.LocalStorageProxy({
                    id: 'twsavedata',
                    proxy:{idProperty: 'id'}
                })
                //proxy: {
                //    type: 'localstorage',
                //    id: 'twsaveddata'
                //}
            }
        });

Both proxy store declarations produced the same results - the key is getting stored in localstorage (twsavedata) but value is empty. The number of tweets is relatively low, so I'm wondering if there is a known limitation with store localstorage proxy only working for single field models... The model data gets updated, as I see it on screen, so that is not the problem.

Thanks for your help.

[mitchellsimoens]

There is no limitation at all. You should uncomment the proxy config and remove the one you have in there though.

[raptors2k4]

There is no limitation at all. You should uncomment the proxy config and remove the one you have in there though.

Thanks for your help Mitchell. Even with changing the store definition to:

        Ext.define('tweetModel',{
            extend:'Ext.data.Model',
            config:{
                fields: ['text']
            }
        });

        Ext.define('TweetStore2', {
            extend: 'Ext.data.Store',
            config: {
                model: 'tweetModel',

                storeId: 'myTweetStore',
                pageSize: 20,
                autoLoad: true,
                autoSync: true,
                
                //proxy: new Ext.data.LocalStorageProxy({
                //    id: 'jbsavedata',
                //    proxy:{idProperty: 'id'}
                //})
                proxy: {
                    type: 'localstorage',
                    id: 'jbsaveddata'
                }
            }
        });

, storing only one field (tweet text) and having the following code to insert items into the store (from a remote store's load listener, which is reloaded periodically):

       localStore.insert(insertPos++,remoteRecord);
       console.log(localStore.first());
       localStore.sync();
       localStore.last().commit();

, I still don't see any data being saved locally in chrome. I used another site and it is able to save to window.localStorage (quite a lot of data actually). Through Ext.List I am able to see the store data, and records are being inserted (so autoSync should have saved the data locally). Do you have any code examples with autosync-ing stores that I could run to see what I get? I hate for this to be a browser issue :-)

[mitchellsimoens]

Here is a test that I tested with 2.0.1 on Chrome 18 and works just fine:

Ext.define('TestModel', {
    extend : 'Ext.data.Model',

    config : {
        identifier : 'uuid',
        fields     : [
            'test'
        ]
    }
});

var store = new Ext.data.Store({
    autoLoad  : true,
    autoSync  : true,
    model     : 'TestModel',
    proxy     : {
        type : 'localstorage',
        id   : 'test'
    },
    listeners : {
        load : function (s) {
            console.log('Data loaded, store has ' + s.getCount() + ' items');
        }
    }
});

new Ext.Container({
    fullscreen : true,
    items      : [
        {
            xtype   : 'button',
            text    : 'Add Data',
            handler : function () {
                store.add([
                    { test : 'One'   },
                    { test : 'Two'   },
                    { test : 'Three' }
                ]);
                //store.sync();

                console.log('Data added, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Remove First Record',
            handler : function () {
                var rec = store.getAt(0);
                store.remove(rec);
                //store.sync();

                console.log('First record removed, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Clear Data',
            handler : function () {
                store.removeAll();
                //store.sync();

                console.log('Data cleared, store has ' + store.getCount() + ' items');
            }
        },
        {
            xtype   : 'button',
            text    : 'Console Record Data',
            handler : function () {
                console.log('Record data:');

                store.each(function (record) {
                    console.log(record.getData());
                });
            }
        }
    ]
});

[raptors2k4]

Hmm, I'll try to fiddle with it later (and try Sencha Touch 2.0.1), but I only see "Data loaded, store has 0 items" on line 22 (the store load listener). I'm using the development microloader.js and sencha-touch-all.js (v2.0.0-commercial). Tried on both Chrome 18.0.1025.168m and Firefox 12.0.

EDIT: Using same resources from 2.0.1 didn't resolve the issue - still see nothing saved with my store, and nothing past the store creation in your script. I feel I'm missing some files (I started this example off the pullrefresh example), but I see no errors in console :\ .. Can you give me a zip of whatever is working for you, and I'll test it over here - replacing my app.js with yours above did not work for me, as I mentioned above. Thanks.