Extjs Ext.data.LocalStorage无法在脱机模式下工作

我现在正在学习Sencha Touch 2，并研究可以在脱机模式下使用的Ext.data.LocalStorage

我试着跟着这部电影 刚刚从或更新了代码，并使用我自己的WCF Rest修改了商店url 但我无法让LocalStorage在脱机模式下工作。我在联机运行应用程序时没有问题。我还尝试在Chrome开发者工具上调试它，但LocalStorage总是获得0数据。我使用了Chrome/Safari浏览器，还使用Phonegap构建了Android应用程序，但仍然无法运行

我错过什么了吗？ 是否有人可以提供处理此问题的详细信息

下面是我的代码：

商店：

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


  config:{
      model: 'Local.model.Online',
    proxy:
        {
            type: 'ajax',
            extraParams: { //set your parameters here
                LookupType: "Phone",
                LookupName: ""
            },
            url: 'MY WCF REST URL',
            headers: {
                'Content-Type': 'application/json; charset=utf-8'
            },
            reader:
            {
                type: 'json'
                , totalProperty: "total"
            },
            writer: {   //Use to pass your parameters to WCF
                encodeRequest: true,
                type: 'json'
            }
        },
    autoLoad: true
  }
});

脱机模式：

Ext.define('Local.model.Offline', {
  extend: 'Ext.data.Model',
  config: {
      idProperty: "ID", //erm, primary key
      fields: [
          { name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
          { name: "LookupName", type: "string" },
          { name: "LookupDescription", type: "string" }
      ],
    identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
    proxy: {
      type: 'localstorage',
      id  : 'news'
    }
  }
});

Ext.define('Local.model.Online', {
  extend: 'Ext.data.Model',
  config: {
       idProperty: "ID", //erm, primary key
      fields: [
          { name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
          { name: "Name", type: "string" },
          { name: "Description", type: "string" }
      ]
  }
});

在线模式：

Ext.define('Local.model.Offline', {
  extend: 'Ext.data.Model',
  config: {
      idProperty: "ID", //erm, primary key
      fields: [
          { name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
          { name: "LookupName", type: "string" },
          { name: "LookupDescription", type: "string" }
      ],
    identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
    proxy: {
      type: 'localstorage',
      id  : 'news'
    }
  }
});

Ext.define('Local.model.Online', {
  extend: 'Ext.data.Model',
  config: {
       idProperty: "ID", //erm, primary key
      fields: [
          { name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
          { name: "Name", type: "string" },
          { name: "Description", type: "string" }
      ]
  }
});

控制器：

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

  config : {
    refs    : {
      newsList   : '#newsList'
    }
  },

  /**
   * Sencha Touch always calls this function as part of the bootstrap process
   */
  init : function () {
    var onlineStore = Ext.getStore('News'),
      localStore = Ext.create('Ext.data.Store', { storeid: "LocalNews",
      model: "Local.model.Offline"
      }),
      me = this;

    localStore.load();

    /*
     * When app is online, store all the records to HTML5 local storage.
     * This will be used as a fallback if app is offline more
     */
    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.data.name + ' (from localStorage)' // in a real app you would not update a real field like this!
        };

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

    });

    /*
     * 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 () {
      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
    });

  }
});

视图：

感谢并问候

1）首先，在创建记录并添加到存储时，记录字段应与该存储的模型字段匹配

在这里，您使用字段

name

创建记录，但是

Local.model.Offline

没有

name

字段

var rec = {
    name : record.data.name + ' (from localStorage)'
};

这就是您需要在刷新中执行的操作

 localStore.getProxy().clear();

 // Also remove all existing records from store before adding
 localStore.removeAll();

store.each(function(record) {
    console.log(record);
    var rec = {
        ID : record.data.ID,
        LookupName : record.data.Name + ' (from localStorage)',
        LookupDescription : record.data.Description 
    };

    localStore.add(rec);
});

// Don't sync every time you add record, sync when you finished adding records
localStore.sync();

---

2） 若在使用localStorage的模型中指定idProperty，则记录将不会添加到localStorage中

型号

Ext.define('Local.model.Offline', {
  extend: 'Ext.data.Model',
  config: {
      // idProperty removed
      fields: [
          { name: "ID", type: "integer" }, //need an id field else model.phantom won't work correctly
          { name: "LookupName", type: "string" },
          { name: "LookupDescription", type: "string" }
      ],
    identifier:'uuid', // IMPORTANT, needed to avoid console warnings!
    proxy: {
      type: 'localstorage',
      id  : 'news'
    }
  }
});

---

没有发布模型和存储代码是很难帮助的。好的，我会提前更新我的代码帖子ThanksThanks@Viswa。我在谷歌上尝试了很多示例代码，但没有一个有效。希望你能帮助我。让我知道我的答案对你有帮助还是没有帮助