Question

我正在研究Sencha Touch 2，并对可以在离线模式下使用的Ext.data.LocalStorage进行一些研究。

我试着追随这个问题 Sencha Touch 2 Local Storage 并且刚刚更新了Github - RobK/SenchaTouch2-LocalStorageExample或riyaadmiller/LocalStorage中的代码，并使用我自己的WCF Rest修改了商店网址但我无法让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.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
    });

  }
});

查看：

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

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

谢谢和问候

Answer 1

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'
    }
  }
});

Ext.data.LocalStorage无法使用脱机模式

1 个答案: