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 に答える