ST2 localstorage and persistency

[alexdran]

Hello all,
I'm trying to save data to localstorage but I cannot manage to have information reloading the app.
I have simplified my App recreating the problem:

I have two lists (one for the items) and one listing the data from localstorate (elements and saved)

Ext.define('p.view.elements', {
    extend: 'Ext.List',
    xtype: 'elements',


    config: {
        title: 'elements',
        styleHtmlContent: true,


        iconCls: 'bookmarks',
            store: 'elements',
            emptyText: 'No elements found for the current Panel (or no connection)',


            itemTpl: ['{name}']
    }
})

Ext.define('p.view.saved', {
    extend: 'Ext.List',
    xtype: 'saved',


    config: {
        title: 'saved',
        styleHtmlContent: true,
        iconCls: 'star',


        ui: 'round',
        store: 'savedstore',
        emptyText: 'No elements found for the current Panel (or no connection)',




        itemTpl: (['{name}'])
    }
})

the store(s) are here

Ext.define('p.store.elements', {
    extend: 'Ext.data.Store',


    config: {
        storeId: 'elements',
        model: "p.model.elements",


        proxy: {
            type: 'ajax',
            url: 'http://localhost/sc/info.php?task=info&id=2&idd=2',
            reader: {
                type: 'json'
            }
        },
        autoLoad: true
    }
});

Ext.define('p.store.savedstore', {
    extend: 'Ext.data.Store',


    config: {
        storeId: 'savedstore',
        model: 'p.model.savedmodel',


        proxy: {
            type: 'localstorage',
            id: 'saved'
        }
    }
});

here are the models:

Ext.define('p.model.elements', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'id', type: 'int'},
            {name: 'name', type: 'string'},
        ]
    }
});

Ext.define('p.model.savedmodel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
//            {name: 'id', type: 'int'},
            {name: 'recordId', type: 'int'},
            {name: 'name', type: 'string'},
        ]
    }
});

I'm saving data to store on doubliclick on list items with the following code:

    addP: function(list, index, target, record) {
        var data = record.data;
        var id = data.id;


        var persistData = {
            recordId: parseInt(id),
            //id: id,
            name: data.name


        }


        var s = Ext.getStore("savedstore");
        s.add(persistData);
        s.sync();
}

as said there is no result when the app is reloaded from the browser (safari and chrome)

also calling s.sync() by console
returns an Object with 0 added elements (that is again for me a sign of something missing)



could you please help me in understanding where is my mistake preventing me to have a persistency in localstorage and ST2??

thank you in advance
Best, Alex

[alexdran]

does anybody has a reply for this?
localstorage seems easily addressable from the examples I have seen -add() / sync()- but I cannot obtain the result of having the data after relaunch (tested on all browsers and on mobile Android)
where is my mistake ?

thank you again for any help!
alessandro

[mitchellsimoens]

Is this in safari or in a package app or on homescreen? I use localstorage in safari and it persists for me.

[alexdran]

first of all thank you very much for your reply and your interest

I have tried with Safari and Chrome; also with package and production build (package also with an Android App - android 2.3): no success!

I have simplified again the app (w/o data downloaded but directly in the store); again no way! I have uploaded the code also here:
https://dl.dropbox.com/u/33373521/p.zip

again any suggestion is highly welcome
alex

[mitchellsimoens]

Here is a test case I use that works:

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

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

var store = new Ext.data.Store({
    autoLoad  : 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    : 'Remove At Index',
            handler : function () {
                Ext.Msg.prompt('Index', 'What index to remove?', function (btn, index) {
                    if (btn === 'ok') {
                        store.removeAt(index);
                        store.sync();

                        console.log('Record removed at index ' + index + '. 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());
                });
            }
        },
        {
            xtype   : 'button',
            text    : 'Alert Number of Records',
            handler : function () {
                alert('Data loaded, store has ' + store.getCount() + ' items');
            }
        }
    ]
});

[alexdran]

Hello, thank you for your piece of code

I have recreated it with a mvc project and it works
It seems my store was missing the config element

autoLoad : true,

now seems ok; opening the app I have found previous elements saved

make completely change with it in my app and I will let you know, thank you for the moment!!

[mitchellsimoens]

I'm glad it helped you!

[alexdran]

seems working,
the other worldly was not to use 'id' field (as already read on some posts) replacing it directly also from the original proxy data (before storing them)

alex