PDA

View Full Version : Sync Localstorage (offline) & Store Proxy JSON (online) ?


gizmoone
16 Jul 2012, 6:54 AM
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
18 Jul 2012, 4:53 AM
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
18 Jul 2012, 5:21 AM
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
18 Jul 2012, 12:53 PM
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 (http://192.168.0.10/proto/offline/app/store/OnLineFonctions.js?_dc=1342644530576)


Uncaught ReferenceError: OffLineFonctions is not defined




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
19 Jul 2012, 9:10 AM
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
19 Jul 2012, 9:15 AM
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
19 Jul 2012, 9:36 AM
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
20 Jul 2012, 2:09 AM
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!