1. #1
    Sencha User
    Join Date
    Jun 2012
    Location
    N/A
    Posts
    18
    Vote Rating
    -2
    gizmoone has a little shameless behaviour in the past

      0  

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

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


    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
    Code:
    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
    Code:
    {"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
    Code:
    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
    Code:
    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
    Code:
    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
    Code:
    Ext.define('proto.view.Fonction', {
        extend: 'Ext.dataview.List',
    
    
        config: {
            store: 'OffLineFonctions',
            onItemDisclosure: true,
            itemTpl: [
                '<div> {Name} {Id} {Visible}</div>'
            ]
        }
    
    
    });



    thanks for you help

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Vote Rating
    817
    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


    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?
    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.

  3. #3
    Sencha User
    Join Date
    Jun 2012
    Location
    N/A
    Posts
    18
    Vote Rating
    -2
    gizmoone has a little shameless behaviour in the past

      0  

    Default


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

  4. #4
    Sencha User
    Join Date
    Jun 2012
    Location
    N/A
    Posts
    18
    Vote Rating
    -2
    gizmoone has a little shameless behaviour in the past

      -1  

    Default


    in proto/app/store/OnLineFonctions.js => add console log when load data
    Code:
    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();"

  5. #5
    Sencha User
    Join Date
    Jun 2012
    Location
    N/A
    Posts
    18
    Vote Rating
    -2
    gizmoone has a little shameless behaviour in the past

      0  

    Default


    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

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    danielappelt is on a distinguished road

      0  

    Default


    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.

  7. #7
    Sencha User
    Join Date
    Jun 2012
    Location
    N/A
    Posts
    18
    Vote Rating
    -2
    gizmoone has a little shameless behaviour in the past

      0  

    Default


    thanks,

    I already tried while putting
    Code:
        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 ?

  8. #8
    Sencha User
    Join Date
    Jul 2012
    Posts
    7
    Vote Rating
    0
    joeshke is on a distinguished road

      0  

    Default


    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!