0

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

我尝试遵循这个 turorial Sencha Touch 2 Local Storage并刚刚从Github - RobK/SenchaTouch2-LocalStorageExample或riyaadmiller/LocalStorage 更新了代码， 并使用我自己的 WCF Rest 修改了 Store 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.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'
    }
  }
});

谢谢并恭祝安康

4

1 回答 1

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'
    }
  }
});
于 2013-07-29T06:50:10.183 回答