1. #1
    Sencha User
    Join Date
    May 2012
    Location
    rome
    Posts
    68
    Vote Rating
    0
    Answers
    3
    alexdran is on a distinguished road

      0  

    Default Answered: ST2 localstorage and persistency

    Answered: ST2 localstorage and persistency


    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)

    Code:
    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}']
        }
    })
    Code:
    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

    Code:
    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
        }
    });
    Code:
    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:
    Code:
    Ext.define('p.model.elements', {
        extend: 'Ext.data.Model',
        config: {
            fields: [
                {name: 'id', type: 'int'},
                {name: 'name', type: 'string'},
            ]
        }
    });
    Code:
    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:

    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

  2. Here is a test case I use that works:

    Code:
    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');
                }
            }
        ]
    });

  3. #2
    Sencha User
    Join Date
    May 2012
    Location
    rome
    Posts
    68
    Vote Rating
    0
    Answers
    3
    alexdran is on a distinguished road

      0  

    Default


    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

  4. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Is this in safari or in a package app or on homescreen? I use localstorage in safari and it persists for me.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  5. #4
    Sencha User
    Join Date
    May 2012
    Location
    rome
    Posts
    68
    Vote Rating
    0
    Answers
    3
    alexdran is on a distinguished road

      0  

    Default


    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


  6. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Here is a test case I use that works:

    Code:
    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');
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  7. #6
    Sencha User
    Join Date
    May 2012
    Location
    rome
    Posts
    68
    Vote Rating
    0
    Answers
    3
    alexdran is on a distinguished road

      0  

    Default


    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!!


  8. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,548
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm glad it helped you!
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #8
    Sencha User
    Join Date
    May 2012
    Location
    rome
    Posts
    68
    Vote Rating
    0
    Answers
    3
    alexdran is on a distinguished road

      0  

    Default


    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

Thread Participants: 1

Tags for this Thread