Sync Localstorage (offline) & Store Proxy JSON (online) ?

[gizmoone]

hello,
i try to load data from file (online) into localstorage (offline).

View from localstorage .
When i try from data file is ok but from localstorage don't work.

i don't no why!


proto.app.js

Ext.application({
    name: 'proto',


    requires: [
        'Ext.MessageBox'
    ],


    views: ['Fonction'],
    models: [
        'Fonction'
    ],
    stores: [
        'OnLineFonctions',
        'OffLineFonctions'
    ],
  
    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },


    isIconPrecomposed: true,


    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },


    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();


        // Initialize the main view
        Ext.Viewport.add(Ext.create('proto.view.Fonction'));
        //      Ext.create('proto.view.Fonction', {fullscreen: true});
 
    },


    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

proto/data/liste.json

{"post":[ { Id: "1",    Name:"id1", Description: "a", Visible: "O", CreatedAt: "", UpdatedAt: "", DeletedAt: "" },
        { Id: "2",    Name: "id4", Description: "a", Visible: "N", CreatedAt: "", UpdatedAt: "", DeletedAt: "" },
        { Id: "3",    Name: "id3", Description: "a", Visible: "N", CreatedAt: "", UpdatedAt: "", DeletedAt: "" },
        { Id: "4",    Name: "id4", Description: "a", Visible: "O", CreatedAt: "", UpdatedAt: "", DeletedAt: "" }]}

proto/app/model/Fonction.js

Ext.define('proto.model.Fonction', {
    extend: 'Ext.data.Model',


    config: {
        fields: [
                { name: 'Id',              type: 'string' },
                { name: 'Name',            type: 'string' },
                { name: 'Description',     type: 'string' },
                { name: 'Visible',         type: 'boolean' },
                { name: 'CreatedAt',       type: 'date' },
                { name: 'UpdatedAt',       type: 'date' },
                { name: 'DeletedAt',       type: 'date' }
            ]
    }
});

proto/app/store/OnLineFonctions.js

Ext.define('proto.store.OnLineFonctions', {
    extend: 'Ext.data.Store',
    requires: [
        'proto.model.Fonction'
    ],


    config: {
  
        model: 'proto.model.Fonction',
        storeId: 'OnLineFonctions',




        // proxy fichier 
        proxy: {
            type: 'ajax',
            url: 'data/liste.json',
    
            reader: {
                type: 'json',
                rootProperty: 'post'
            }
        },    
            autoLoad: true,
            listeners: {
                load: function() {


                    // Clear proxy from offline store
                    OffLineFonctions.proxy.clear();


                    // Loop through records and fill the offline store
                    this.each(function(record) {


                        OffLineFonctions.add(record.data);


                    });


                    // Sync the offline store
                    OffLineFonctions.sync();


                    // Remove data from online store
                    OnLineFonctions.removeAll();


                }
            }
    
        
    }
});

proto/app/OffLineFonctions.js

Ext.define('proto.store.OffLineFonctions', {
    extend: 'Ext.data.Store',
    requires: [
        'proto.model.Fonction'
    ],


    config: {
        model: 'proto.model.Fonction',
        proxy: {
            type: 'localstorage',
            id: 'myFonctions'
        }        
    }
});

proto/app/view/Fonction.js

Ext.define('proto.view.Fonction', {
    extend: 'Ext.dataview.List',


    config: {
        store: 'OffLineFonctions',
        onItemDisclosure: true,
        itemTpl: [
            '<div> {Name} {Id} {Visible}</div>'
        ]
    }


});

thanks for you help

[mitchellsimoens]

What do you mean from localstorage it doesn't work? By your code when the online store loads you are adding the data to the offline store and syncing the store. Do you have value for the idProperty?

[gizmoone]

hello,

when i start the app, i have the blank screen without data.
in the first step with only online store , i had data in my page.

index.html

<!DOCTYPE HTML><html manifest="" lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>proto</title>
    <style type="text/css">
         /**
         * Example of an initial loading indicator.
         * It is recommended to keep this as minimal as possible to provide instant feedback
         * while other resources are still being loaded for the first time
         */
        html, body {
            height: 100%;
            background-color: #1985D0
        }


        #appLoadingIndicator {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            width: 100%;
            height: 30px;
            -webkit-animation-name: appLoadingIndicator;
            -webkit-animation-duration: 0.5s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: linear;
        }


        #appLoadingIndicator > * {
            background-color: #FFFFFF;
            display: inline-block;
            height: 30px;
            -webkit-border-radius: 15px;
            margin: 0 5px;
            width: 30px;
            opacity: 0.8;
        }


        @-webkit-keyframes appLoadingIndicator{
            0% {
                opacity: 0.8
            }
            50% {
                opacity: 0
            }
            100% {
                opacity: 0.8
            }
        }
    </style>
    <!-- The line below must be kept intact for Sencha Command to build your application -->
    <script id="microloader" type="text/javascript" src="sdk/microloader/development.js"></script>
	
</head>
<body>
    <div id="appLoadingIndicator">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

thanks

[gizmoone]

in proto/app/store/OnLineFonctions.js => add console log when load data

Ext.define('proto.store.OnLineFonctions', {    extend: 'Ext.data.Store',
    requires: [
        'proto.model.Fonction'
    ],


    config: {
      /*  autoLoad: true,*/
        model: 'proto.model.Fonction',
        storeId: 'OnLineFonctions',


		// proxy fichier 
        proxy: {
            type: 'ajax',
            url: 'data/liste.json',
    
			reader: {
                type: 'json',
                rootProperty: 'post'
            }
        },    
        autoLoad: true,
        listeners: {
            load: function() {
					console.log ('load start');
                    // Clear proxy from offline store
                    OffLineFonctions.proxy.clear();


                    // Loop through records and fill the offline store
					console.log ('data start');
                    this.each(function(record) {
                        console.log ('data : ' + record.data);
                        OffLineFonctions.add(record.data);


                    });
					console.log ('data end');
                    // Sync the offline store
                    OffLineFonctions.sync();


                    // Remove data from online store
                    OnLineFonctions.removeAll();


                }
			}
        
		/*
        sorters: {
            property: 'Name'
        },
        grouper: {
            property: 'Name'
        }*/
		
	}
});

in the console log :


load start OnLineFonctions.js:25

• [COLOR=red !important]Uncaught ReferenceError: OffLineFonctions is not defined [/COLOR]

[COLOR=red !important]
[/COLOR]


Where is the problem because OffLineFonctions is normaly defined.
I have the same problem in other line if comment the line "OffLineFonctions.proxy.clear();"

[gizmoone]

Does someone have an idea?
I think that I am not the only one to use online and offline of this manner.


I find several pieces of examples but in a former version and in a single file.


Thank you in advance for your help

[danielappelt]

There is at least one problem in your code. OnLineFonctions does not know anything about the existence of OffLineFonctions (or an instance of it). You could add a config option in the class definition of OnLineFonctions for this, and then would need to set it with an actual instance of OffLineFonctions.

[gizmoone]

thanks,

I already tried while putting

    requires: [
        'proto.model.Fonction',
		'proto.store.OffLineFonctions'
    ],

in OnLineFonctions.js but that does not work not more.


I am again very young at the level of sencha touch therefore
I again could not be understood the very philosophy, or where I must put the data.

Another way, idea ?

[joeshke]

I was in the same situation as you one week ago, but with a slight diffrence.
I have to load the data from the SQLite DB into a list when the list is showen, I check if the user is online and load the new content from the server and save them to the SQLite store and refresh the list.

So I have a working solution without creating a custom proxy, I used the SQLite proxy from shepsii.

Good luck!