2013-05-31 19 views
5

Voglio fare elenco nidificato di categorie di spesa utilizzando i dati forniti dal server di cui sembra qualcosa di simile:Re dati formattazione JSON per adattarsi al negozio albero

{ 
    "status":{"statusCode":15001}, 
    "data":[ 
     {"itemId":1, "name":"Men", "subCategories":[ 
      {"itemId":2, "name":"Clothes", "subCategories":[ 
       {"itemId":3, "name":"Formals", "leaf":true,"subCategories":[]}, 
       {"itemId":4, "name":"Casual", "leaf":true,"subCategories":[]}, 
       {"itemId":5, "name":"Sports", "leaf":true,"subCategories":[]} 
      ]}, 
      {"itemId":6, "name":"Accessories", "subCategories":[ 
       {"itemId":7, "name":"Formals", "leaf":true,"subCategories":[]}, 
       {"itemId":8, "name":"Casual", "leaf":true,"subCategories":[]}, 
       {"itemId":9, "name":"Sports", "leaf":true,"subCategories":[]} 
      ]} 
     ]}, 
     {"itemId":10, "name":"Women", "subCategories":[ 
      {"itemId":11, "name":"Clothes", "subCategories":[ 
       {"itemId":12, "name":"Formals", "leaf":true,"subCategories":[]}, 
       {"itemId":13, "name":"Casual", "leaf":true,"subCategories":[]}, 
       {"itemId":14, "name":"Ethnic", "leaf":true,"subCategories":[]} 
      ]}, 
      {"itemId":15, "name":"Shoes", "subCategories":[ 
       {"itemId":16, "name":"Hells", "leaf":true,"subCategories":[]}, 
       {"itemId":17, "name":"Wedges", "leaf":true,"subCategories":[]}, 
       {"itemId":18, "name":"Sports", "leaf":true,"subCategories":[]} 
      ]} 
     ]} 
    ] 
} 

Dal struttura ad albero è avvolto in data elemento e bambini sono avvolto in subCategories tag che è diverso dal data così ho voluto pretrattare questi dati in modo che possa essere utilizzato da Nested List direttamente facendo risposta simili:

{ 
    "categories":[ 
     {"itemId":1, "name":"Men", "categories":[ 
      {"itemId":2, "name":"Clothes", "categories":[ 
       {"itemId":3, "name":"Formals", "leaf":true,"categories":[]}, 
       {"itemId":4, "name":"Casual", "leaf":true,"categories":[]}, 
       {"itemId":5, "name":"Sports", "leaf":true,"categories":[]} 
      ]}, 
      {"itemId":6, "name":"Accessories", "categories":[ 
       {"itemId":7, "name":"Formals", "leaf":true,"categories":[]}, 
       {"itemId":8, "name":"Casual", "leaf":true,"categories":[]}, 
       {"itemId":9, "name":"Sports", "leaf":true,"categories":[]} 
      ]} 
     ]}, 
     {"itemId":10, "name":"Women", "categories":[ 
      {"itemId":11, "name":"Clothes", "categories":[ 
       {"itemId":12, "name":"Formals", "leaf":true,"categories":[]}, 
       {"itemId":13, "name":"Casual", "leaf":true,"categories":[]}, 
       {"itemId":14, "name":"Ethnic", "leaf":true,"categories":[]} 
      ]}, 
      {"itemId":15, "name":"Shoes", "categories":[ 
       {"itemId":16, "name":"Hells", "leaf":true,"categories":[]}, 
       {"itemId":17, "name":"Wedges", "leaf":true,"categories":[]}, 
       {"itemId":18, "name":"Sports", "leaf":true,"categories":[]} 
      ]} 
     ]} 
    ] 
} 

F o questo stavo ignorando getResponseData di lettore, ma questo metodo non viene mai chiamato e nessun record viene caricato nell'archivio. Che cosa sto facendo di sbagliato?

Ecco il mio negozio:

Ext.define('MyTabApp.store.CategoriesStore',{ 
    extend:'Ext.data.TreeStore', 
    config:{ 
     model : 'MyTabApp.model.Category', 
     autoLoad: false, 
     storeId : 'categoriesStore', 
     proxy: { 
      type: 'ajax', 
      url: Properties.CONFIG_SERVICE_BASE_URL+'topnav/getall', 
      reader: { 
       type: 'json', 
       getResponseData: function(response) { 
        console.log("in getResponseData"); // Never logged in console 
        var rText = response.responseText; 
        var processed = Helper.replaceAll("data","categories",rText); 
        processed = Helper.replaceAll("subCategories","categories",processed); 
        var respObj = Ext.JSON.decode(processed); 
        return respObj.categories; 
       } 
      } 
     }, 
     listeners:{ 
      load: function(me, records, successful, operation, eOpts){ 
       console.log("categories tree loaded"); 
       console.log(records); // This prints blank array 
      } 
     } 
    } 
}); 

e qui è il modello:

Ext.define('MyTabApp.model.Category', { 
    extend : 'Ext.data.Model', 
    config : { 
     idProperty : 'itemId', 
     fields  : [ 
      {name : 'itemId',type : 'int'}, 
      {name : 'name',type : 'string'} 
     ] 
    } 
}); 

Questa è la lista:

Ext.define('MyTabApp.view.CategoriesList', { 
    extend: 'Ext.dataview.NestedList', 
    alias : 'widget.categorieslist', 
    config: { 
     height    : '100%', 
     title    : 'Categories', 
     displayField  : 'name', 
     useTitleAsBackText : true, 
     style    : 'background-color:#999 !important; font-size:75%', 
     styleHtmlContent : true, 
     listConfig: { 
      itemHeight: 47, 
      itemTpl : '<div class="nestedlist-item"><div style="position:absolute; left:10px; top:10px; color:#222; font-size:130%">{name}</div></div>', 
      height : "100%" 
     } 
    }, 
    initialize : function() { 
     this.callParent(); 
     var me = this; 

     var catStore = Ext.create('MyTabApp.store.CategoriesStore'); 
     catStore.load(); 
     me.setStore(catStore); 
    } 
}); 

Qual è delle migliori pratiche per elaborare formato & dati ricevuti se non è nel formato che vogliamo e non abbiamo il controllo sui servizi?

+0

Quale sarebbe lo scopo di sostituire le chiavi in ​​un oggetto javascript? Non puoi farcela con loro? –

+0

Sto provando a cambiare le stringhe 'data' e' sottocategorie' in 'categories' in modo che quando viene analizzato caricato nel tree store il mio elenco annidato comprenda i dati perché tutti i nomi genitore e figlio sono uguali. Per favore controlla la mia altra domanda che è anche correlata http://stackoverflow.com/questions/16854839/how-to-specify-rootproperty-for-nested-data-if-it-is-one-level-below – ThinkFloyd

+0

fondamentalmente sono ottenere dati in un altro formato che non è come i dati usati in [esempi] (http://docs.sencha.com/touch/2.1.1/#!/guide/nested_list) dove 'items' è il nome degli array su tutti i livelli. quindi voglio cambiare i miei dati ricevuti e renderli così prima che vengano caricati in negozio. – ThinkFloyd

risposta

0

Non penso che sia possibile allegare getResponseData alla configurazione del lettore. In passato ho usato il seguente approccio.

  1. Creare un override di Ext.data.reader.Json come di seguito. Ma il lato negativo è che questo sarà chiamato per tutti i tuoi proxy usando json reader. e quindi aggiungi YourApp.override.data.reader.Json nella sezione richiede dell'applicazione.

    Ext.define('YourApp.override.data.reader.Json', { override: 'Ext.data.reader.Json', 'getResponseData': function(response) { // your implementation here }

  2. In alternativa è possibile effettuare un'Ext.Ajax.request e sul gestore di successo analizzare i dati nel modo desiderato e quindi impostare i dati nel tuo negozio. È inoltre possibile scrivere questo codice nell'evento "refresh" o "beforeload" dello store e restituire false per annullare l'azione