Tirer le LocalStorageProxy travailler avec un TreeStore

Question

Ohé là,

Je construis une application Sencha iPhone qui utilise un TreeStore qui fonctionne bien avec un NestedList mais j'ai frappé un mur.

Il a besoin d'un moyen de lire les données dans un magasin statique (le TreeStore), le charger dans localStorage il est donc accessible en écriture et puis enregistrez des préférences de l'utilisateur. J'ai compris que le localStorageProxy est probablement ce dont j'ai besoin (j'ai été soulagé de découvrir que je n'avais pas à sérialiser et désérialiser le magasin JSON manuellement!) Mais après avoir lu la documentation dessus et essayé et échoué à quelques suis à perte. En l'état, il génère le stockage localStorage ... mais il est vide, je suppose que c'est parce que je n'ai rien chargé dedans mais en faisant app.stores.event_store.load(); l'écran est vide et la console montre que le localStorage est vide sans erreur .

Mon modèle:

 
Ext.regModel('Events', { 
    fields: [ 
     {name: 'text',  type: 'string'}, 
     {name: 'info',  type: 'string'}, 
     {name: 'attend', type: 'boolean', defaultValue: 'false'} 
    ] 
}); 

Mon magasin:

 
app.stores.event_store = new Ext.data.TreeStore({ 
    model: 'Events', 
    root: data, 
    storeId: 'eventStoreId', 
    proxy: { 
     type: 'localstorage', 
     id: 'eventsAttending', 
     url: 'store.js', 
     reader: { 
      type: 'tree', 
      root: 'items' 
     } 
    } 
}); 

app.stores.event_store.load(); 

Il provient probablement d'un manque de compréhension fondamentale de la façon dont ces modèles et les magasins interagissent, mais si quelqu'un pouvait aider, bon karma être envoyé à votre façon.

L'application complète est disponible à it's GitHub repo.

-fetimo

Answer 1

Le TreeStore attend des données hiérarchiques

var data= { 
    text: 'Groceries', 
    items: [{ 
     text: 'Drinks', 
     items: [{ 
      text: 'Water', 
      items: [{ 
       text: 'Sparkling', 
       leaf: true 
      },{ 
       text: 'Still', 
       leaf: true 
      }] 
     },{ 
      text: 'Coffee', 
      leaf: true 
     }] 
    }] 
} 

Mais le LocalStorageProxy est incapable de correspondre au modèle de cette structure de données.

Je voudrais utiliser une requête AJAX pour charger le fichier « store.js » en utilisant le localStorage directement à « stocker » le blob de données.

Ext.Ajax.request({ 
    url: 'store.js', 
    success: function(response, opts) { 
     localStorage.StoreJSBlob = response.responseText; 
    } 
}); 

alors votre magasin ressemblera à quelque chose comme ceci:

var store = new Ext.data.TreeStore({ 
    model: 'Events', 
    root: localStore.StoreJSBlob, 
    proxy: { 
     type: 'ajax', 
     reader: { 
      type: 'tree', 
      root: 'items' 
     } 
    } 
}); 

Il vous suffit d'enchaîner les événements ensemble correctement, comme les appels async pourraient vous faire trébucher