0

I am trying to store data offline aspect, but here i want to store data on localstorage, did not store able to store this, all value getting null in localstorage.

This the based on ; http://www.robertkehoe.com/2012/11/sencha-touch-2-localstorage-example/

Models: *Online.js*

Ext.define('default.model.Online', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
                    'cat_id',
                    'category_name'
                ]
  }
});

Offline.js

Ext.define('default.model.Offline', {
  extend: 'Ext.data.Model',
  config: {
    fields: [
                    'cat_id',
                    'category_name'
                ],
    identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
    proxy: {
      type: 'localstorage',
      id  : 'category'
    }
  }
});

Stores:

Ext.define('default.store.News', {
  extend:'Ext.data.Store',


  config:{
    model:'default.model.Online',
    proxy: {
      timeout: 3000, // How long to wait before going into "Offline" mode, in milliseconds.
      type: 'ajax',
      url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363?_dc=1376475408437&page=1&start=0&limit=25' , // Sample URL that simulates offline mode. Example.org does not allow cross-domain requests so this will always fail
      reader: {
                type: "json",
                rootProperty: "data"
            }
      },
    autoLoad: true
  }
});

Controller:

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

  config : {
    refs    : {
      newsList   : '#newsList'
    }
  },
  init : function () {
    var onlineStore = Ext.getStore('News'),
      localStore = Ext.create('Ext.data.Store', {
        model: "default.model.Offline"
      }),
      me = this;

    localStore.load();

    onlineStore.on('refresh', function (store,record) {
     Ext.Msg.alert('Notice', 'You are in online mode', Ext.emptyFn);
      //  console.dir(record.data.name);
        console.dir(record.get('category_name'));
        console.log(record.items[0].raw.category_name);
        console.log(record.get('category_name'));
      // Get rid of old records, so store can be repopulated with latest details
      localStore.getProxy().clear();

      store.each(function(record) {

        var rec = {
          name : record.data.category_name+ ' (from localStorage)' // in a real app you would not update a real field like this!
        };

        localStore.add(rec);
        localStore.sync();
      });

    });
      onlineStore.getProxy().on('exception', function () {
      me.getNewsList().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 think, I am not getting value from this record.data.category_nam . Here I am getting first value from this:record.items[0].raw.category_name. So how to store in localstorage. and View file:

Ext.define('default.view.Main', {
  extend : 'Ext.List',

  config : {
    id               : 'newsList',
    store            : 'News',
    disableSelection : false,
    itemTpl          : Ext.create('Ext.XTemplate',
      '{category_name}'
    ),
    items            : {
      docked : 'top',
      xtype  : 'titlebar',
      title  : 'News List'
    }
  }
});

In localstorage, following output:

category-5ea01a8d-ef1e-469e-8ec4-790ec7306aaf
{"cat_id":null,"category_name":null,"id":"5ea01a8d-ef1e-469e-8ec4-790ec7306aaf"}
category-f3e090dd-8f25-4b20-bb6e-b1a030e07900
{"cat_id":null,"category_name":null,"id":"f3e090dd-8f25-4b20-bb6e-b1a030e07900"}
category-5148e6eb-85ae-4acd-9dcd-517552cf5d97
{"cat_id":null,"category_name":null,"id":"5148e6eb-85ae-4acd-9dcd-517552cf5d97"}
category-ec23ff8b-1faa-4f62-9284-d1281707a9bc
{"cat_id":null,"category_name":null,"id":"ec23ff8b-1faa-4f62-9284-d1281707a9bc"}
category-6c1d

I have display in view but could not store in localstorage for offline propose.where i did wrong, i could not get it.

1 Answer 1

0

Record you created should match the SF.model.Offline model.

In your following code

 var rec = {
  // name is the field name of the `SF.model.Offline` model.
  name : record.data.category_name+ ' (from localStorage)' 
 };

 localStore.add(rec);
 localStore.sync();

But you see there is no field called name in SF.model.Offline model.

This is how you should do

Models

Ext.define('SF.model.Online', {
    extend : 'Ext.data.Model',    
    config: {
        fields: ['cat_id','category_name'],
   }
});

Ext.define('SF.model.Offline', {
    extend : 'Ext.data.Model',
    config: {
        fields: ['cat_id','category_name'],
        identifier:'uuid', 
        proxy: {
          type: 'localstorage',
          id  : 'category'
        }
    }
});

Store

Ext.define('SF.store.Category', {
    extend : 'Ext.data.Store',   
    config : {
        model : 'SF.model.Online',
        storeId : 'category',
        proxy: {
            timeout: 3000, 
            type: 'ajax',
            url: 'same url' , 
        reader: {
                type: "json",
                rootProperty: "data"
            }
      },
        autoLoad : true
    }
});

In Controller

 var onlineStore = Ext.getStore('category'),
 localStore = Ext.create('Ext.data.Store', { 
        model: "SF.model.Offline"
    }),
    me = this;

  localStore.load();  

  onlineStore.on('refresh', function (store, records) {  
    localStore.getProxy().clear();
    onlineStore.each(function(record) {

     //You creating record here, The record fields should match SF.model.Offline model fields
      var rec = {
        cat_id : record.data.cat_id + ' (from localStorage)',
        category_name : record.data.category_name + ' (from localStorage)'
      };

      localStore.add(rec);
      localStore.sync(); 
    });
  });  

  onlineStore.getProxy().on('exception', function () {
    me.getNewsList().setStore(localStore); 
    localStore.load(); 
    Ext.Msg.alert('Notice', 'You are in offline mode', Ext.emptyFn);
 });
5
  • If I have word with defination, How to store in localstorage and display on Ext.XTemplate. Do you have any idea behind this. My JSON looks like this word with definition if have.alucio.com.np/trunk/dev/sillydic/admin/api/word/…
    – user1391869
    Aug 20, 2013 at 5:44
  • @Google_Android_Lovers.. that is what you are doing inside onlineStore.getProxy().on('exception', function () {..}, if your app not online you setting localStore in news list.
    – Viswa
    Aug 20, 2013 at 6:00
  • i have try this: message : record.data.message, definition : record.data.definitions.defintion, ratings:"red". Here message working fine and ratings in statis it is also workks, but in case of definations, it did not works, please help me.
    – user1391869
    Aug 20, 2013 at 12:27
  • @Google_Android_Lovers ask a new question with clear explanation or update this question
    – Viswa
    Aug 20, 2013 at 14:49
  • Plz Check this stackoverflow.com/questions/18371402/…
    – user1391869
    Aug 22, 2013 at 3:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.