Make sencha app available offline

Question

I am trying to make sencha app available offline but i am unable to load server data from store.I am stuck on how ta make it offline.

Below are the code that i have tried:

My store:

Ext.define('MyApp.store.TodaysWord',{
extend: 'Ext.data.Store', 
config:
{
autoLoad:true,
model: 'MyApp.model.TodaysWord',    
id:'TodaysWord',
proxy:
{
    type: 'ajax',
    url: 'url', 

    reader:
    {
            rootProperty:''
    }
}
}
});

My Model:

Ext.define('MyApp.model.TodaysWord', {
extend: 'Ext.data.Model',

requires: ['MyApp.model.TodaysWordMenu'],

config: {
    fields: [
        {name: 'status', mapping: 'status'},
        {name: 'message', mapping: 'message'},
        {name:'data', mapping: 'data'},
        {name: 'definitions', mapping: 'definitions.defintion'},
        {name: 'ratings', mapping: 'definitions.rating'},
        {name:'def_id', mapping:'definitions.def_id'},
    ],
}
});


Ext.define('MyApp.model.TodaysWordMenu', {
extend: 'Ext.data.Model',
config: {
    fields: [
        'name',
        'author',
        'word_id',
        'category',
      'definition',
      'rating',
      'def_id',
      'example',
      'author',
      'is_favourite'
    ],

    belongsTo: "MyApp.model.TodaysWord"
}
});

My View:

{
xtype: 'list',
cls: 'todayswordhome',
itemCls:"todaysWordLists",
store: 'TodaysWord',
height: 140,
layout: 'fit',
loadingText: "Loading ...",
emptyText: "<div class=\"notes-list-empty-text\">No notes found.</div>",       

scrollable: {  
direction: 'vertical',
directionLock: true,
},
margin: '0 0 5px 0',
itemTpl: [          
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2><b>{name}</b></h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div id = "definition" >',
'<div class="paragraph-def"><p>{defintion}</p></div>',
'<span class="authorBox"><i>Author: {author}</i></span>',
'<div id="favourite" class="{is_favourite}" ></div>',
'</div>',
'</li>',
'</ul>',
'</tpl>',
'</li>',
'</ul>',
'</tpl>',
'</div>',
]
}

My controller to make it offline:

Ext.define('MyApp.controller.Core', {
extend : 'Ext.app.Controller',

config : {
refs : {
  homepage : '#homepage'
}
},
init : function () {
var onlineStore = Ext.getStore('TodaysWord'),
  localStore = Ext.create('Ext.data.Store', {
    model: "MyApp.model.OfflineTodaysWord"
  }),
  me = this;

localStore.load();


onlineStore.on('refresh', function (store, records) {

  // Get rid of old records, so store can be repopulated with latest details
  localStore.getProxy().clear();

  store.each(function(record) {

    var rec = {

      name : record.message + ' (from localStorage)' // in a real app you would not update a real field like this!

    };
     console.log("Offline --->" + name);

    localStore.add(rec);
    localStore.sync();
    console.log("Offline");
   });

 });

/*
* If app is offline a Proxy exception will be thrown. If that happens then use
* the fallback / local stoage store instead
*/
onlineStore.getProxy().on('exception', function () {
  this.gethomePage().setStore(localStore); //rebind the view to the local store
  localStore.load(); // This causes the "loading" mask to disappear
  Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn); //alert the user that they are in offline mode
 });

}
});

I am not able to make offline.I have tried sencha's offline tutor too. Any Guidance.

Thanks in advance for your support.

score 1 · Answer 1 · answered Aug 16 '13 at 12:27

1

I think the line below is clearing your local store:

localStore.load(); // This causes the "loading" mask to disappear

try removing it

answered Aug 16 '13 at 12:27

Nico Grunfeld

1,133
1
8
19

mm probably the problem is that you r creating the localstore on the fly. Did you try with the localStore as separate file? Also, Im assuming OfflineTodaysWord model is already created? why dont use the same model and cp the entire store once it loaded – Nico Grunfeld Aug 16 '13 at 12:45
@ Nico Grunfeld can you please look onto this post once and suggest some idea http://stackoverflow.com/questions/18397623/how-to-get-value-form-record-in-sencha-touch – surhidamatya Aug 23 '13 at 09:56
@sur007 I looked on that question, I totally agree with kevhender's answer, isn't that working? – Nico Grunfeld Aug 24 '13 at 19:21
when i do record.get('name') it consoles undefined it is not going through loop. – surhidamatya Aug 26 '13 at 03:40
1

check my answer there – Nico Grunfeld Aug 26 '13 at 11:07

score 0 · Accepted Answer · answered Aug 23 '13 at 09:30

Ok, i found my mistake i forgot to create offline local storage. As we know we need to create model for offline storage and in that model i forgot to keep proxy:localstorage, my code snippets are as below:

Ext.define('Sencha.model.ContactOffline', {
extend: 'Ext.data.Model',
config: {
    fields: [
    {name: 'status', mapping: 'status'},
    {name: 'message', mapping: 'message'},
    {name:'data', mapping: 'data'},
    {name: 'definitions', mapping: 'definitions.defintion'},
    {name: 'ratings', mapping: 'definitions.rating'},
    ],

    identifier:'uuid',
    proxy: {
      type: 'localstorage',
      id  : 'todaysword'
  },
   hasMany: [
        {
            model: 'Sencha.model.MenuOffline',
            autoLoad: true,
            name: 'data'
      }
    ]
}
});

Hope it would help someone.

Make sencha app available offline

2 Answers2