Utilisation de localStorage en magasin dans Sencha Touch

Question

J'essaye de construire un magasin avec des éléments de localStorage dans mon application Sencha Touch.

Le localStorage Je veux obtenir des données à partir est localStorage [ « flux »] et ressemble à ceci:

"[{"title":"Title 1","url":"http://stackoverflow.com"}, 
    {"title":"Title2","url":"http://google.com"}]" 

Je suis en train de le faire entrer dans le magasin avec les éléments suivants:

var feedsPanel; 
var store; 
Ext.setup({ 
icon: 'icon.png', 
glossOnIcon: false, 
onReady: function(){ 
    Ext.regModel("feedModel", { 
     fields: [ 
      { name: "title", type: "string" }, 
      {name: "url", type:"string"} 
     ] 
    }); 
    store = new Ext.data.Store({ 
      proxy: new Ext.data.LocalStorageProxy({ 
       id: 'feeds' 
      }), 
      model:"feedModel" 
    }); 

Lorsque je tente dans Chrome d'essayer store.load(), cela échoue à cause de TypeError: Impossible de lire la propriété 'title' de null.

Comment suis-je supposé accéder à chaque titre et chaque URL de ce localStorage? Regarder l'exemple du jeu Solitaire me donne le vertige.

Le reste de mon application Sencha ne dépend pas de ce magasin pour le moment, et se charge parfaitement. Je vérifie s'il y a des articles dans le magasin avec la console dans Chrome.

Answer 1

Un tel format localStorage n'est pas spécifique aux magasins Sencha. Mais si vous avez vraiment besoin de lire à partir de localStorage formaté de cette façon, vous pouvez essayer ce qui suit. C'est possible :-)

// first prefill localStorage 
var feeds = [], j = 0; 
while (j < 25) { 
    feeds.push({'title': 'Title ' + ++j, url: 'http://link' + j + '.com'}); 
} 
localStorage.setItem('feeds', Ext.encode(feeds)); 

// Sencha Touch v1 Application 
new Ext.Application({ 
    name: 'App', 

    launch: function() { 
     var store = new Ext.data.JsonStore({ 
      id: 'feedstore', 
      fields: ['title', 'url'], 
      autoload: true, 
      proxy: { 
       id: 'feedproxy', 
       type: 'memory', 
       url: 'feeds', 
       create: function() { 
        console.log('feed: CREATE'); 
       }, 
       read: function (operation, callback, scope) { 
        console.log('feed: READ'); 

        var data = localStorage.getItem(this.url), 
         i, len, records = []; 

        console.log('data: ' + data); 
        data = Ext.decode(data); 

        if (Ext.isArray(data)) { 
         len = data.length; 
         for (i = 0; i < len; ++i) { 
          records.push(new this.model(data[i])); 
         }; 

         // return model instances in a result set 
         operation.resultSet = new Ext.data.ResultSet({ 
          records: records, 
          total : len, 
          loaded : true 
         }); 

         // announce success 
         operation.setSuccessful(); 
         operation.setCompleted(); 

         // finish with callback 
         if (typeof callback == "function") { 
          callback.call(scope || this, operation); 
         } 
         Ext.getBody().unmask(); 
        } 
       }, 
       update: function() { 
        console.log('feed: UPDATE'); 
       }, 
       destroy: function() { 
        console.log('feed: DESTROY'); 
       }, 
       reader: { 
        type: 'json' 
       } 
      } 
     }).load(); 

     this.viewport = new Ext.Panel({ 
      fullscreen: true, 
      layout: 'card', 
      items: [{ 
       xtype: 'list', 
       itemTpl : '{title}<br />{url}', 
       store: store 
      }] 
     }); 
    } 
}); 

Answer 2

Le stockage local contient-il déjà des entrées ayant un schéma de modèle différent? Juste une pensée: essayez un identifiant de proxy différent.

Mais je pense aussi que vous êtes mieux d'enregistrer un magasin que de l'instancier directement. Essayez:

Ext.regStore('store', { 
    proxy: {...} 
    ... 
); 

Puis

store:'store' 

dans les listes ou tout qui se lient à elle.