visualizzare un elenco da JSON nidificato: Sencha Touch 2

Question

Ho una lista che visualizza un elenco di ristoranti con il logo del ristorante, ecc

La vista

Ext.define('Test.view.Contacts', { 
    extend: 'Ext.List', 
    xtype: 'contacts', 

    config: { 
     title: 'Stores', 
     cls: 'x-contacts', 

     store: 'Contacts', 
     itemTpl: [ 
      '<div class="headshot" style="background-image:url(resources/images/logos/{logo});"></div>', 
      '{name}', 
      '<span>{add1}</span>' 
     ].join('') 
    } 
}); 

Quando si tocca il ristorante voglio che mostri un altro elenco basato sull'elemento toccato.

La seconda vista

Ext.define('Test.view.Menu', { 
    extend: 'Ext.List', 
    xtype: 'contact-menu', 

    config: { 
     title: 'Menu', 
     cls: 'x-contacts', 

     store: 'Contacts', 
     itemTpl: [ 
      '<div>{item}</div>' 
     ].join(''), 
    }, 
}); 

I modelli

Ext.define('Test.model.Contact', { 
    extend: 'Ext.data.Model', 

    config: { 
     fields: [ 
      'name', 
      'logo', 
      'desc', 
      'telephone', 
      'city', 
      'add1', 
      'post', 
      'country', 
      'latitude', 
      'longitude' 
     ], 
     proxy: { 
      type: 'ajax', 
      url: 'contacts.json' 
     } 
    }, 
    hasMany: { 
     model: "Test.model.Menus", 
     name: 'menus' 
    } 
}); 

Ext.define('Test.model.Menus', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: [ 
      'item' 
     ] 
    }, 
    belongsTo: "Test.model.Contact" 
}); 

L'archivio

Ext.define('Test.store.Contacts', { 
    extend: 'Ext.data.Store', 

    config: { 
    model: 'Test.model.Contact', 
    autoLoad: true, 
    //sorters: 'name', 
    grouper: { 
     groupFn: function(record) { 
     return record.get('name')[0]; 
     } 
    }, 
    proxy: { 
     type: 'ajax', 
     url: 'contacts.json', 
     reader: { 
     type: 'json', 
     root: 'stores' 
     } 
    } 
    } 
}); 

Il JSON

{ 
    "stores": [{ 
     "name": "Science Gallery", 
     "logo": "sciencegallery.jpg", 
     "desc": "Get some food", 
     "telephone": "016261234", 
     "city": "Dublin", 
     "add1": "Pearse Street", 
     "post": "2", 
     "country": "Ireland", 
     "latitude": "53.34422", 
     "longitude": "-6.25006", 
     "menu": [{ 
      "item": "SC Sandwich" 
     }, { 
      "item": "SC Toasted Sandwich" 
     }, { 
      "item": "SC Panini" 
     }, { 
      "item": "SC Ciabatta" 
     }, { 
      "item": "SC Burrito" 
     }] 
    }, { 
     "name": "Spar", 
     "logo": "spar.jpg", 
     "desc": "Get some food", 
     "telephone": "016261234", 
     "city": "Dublin", 
     "add1": "Mayor Street", 
     "post": "2", 
     "country": "Ireland", 
     "latitude": "53.34422", 
     "longitude": "-6.25006", 
     "menu": [{ 
      "item": "Spar Sandwich" 
     }, { 
      "item": "Spar Toasted Sandwich" 
     }, { 
      "item": "Spar Panini" 
     }, { 
      "item": "Spar Ciabatta" 
     }, { 
      "item": "Spar Burrito" 
     }] 
    }] 
} 

voglio mostrare un elenco di voci di menu (voce, voce, voce ...) per la selectedbut ristorante quando uso un elenco nidificato devo usare lo stesso modello come il precedente elenco che non soddisfa i miei bisogni. Al momento ottengo la giusta quantità di articoli ma non si vede nulla. Puoi per favore aiutarmi con dove sto andando male, grazie.

Answer 1

Prima di arrivare alla soluzione, qui ci sono alcuni problemi con il codice (che devono essere fissati prima che la soluzione funzionerà):

• Nel proxy di configurazione all'interno del negozio Contacts, il config per il rog del tuo JSON è rootProperty, non root.

  proxy: { 
      type: 'ajax', 
      url: 'contacts.json', 
      reader : { 
       type : 'json', 
       rootProperty : 'stores' 
      } 
  } 
  

  Si potrebbe anche inserire questo codice all'interno del modello, poiché è già presente una configurazione proxy. Qui ci sono sia fusa (dovrebbe essere all'interno del vostro modello, e rimuovere delega dal negozio):

  proxy: { 
      type: 'ajax', 
      url: 'contacts.json', 
      reader : { 
       type : 'json', 
       rootProperty : 'stores' 
      } 
  } 
  

• nomi modello dovrebbe sempre essere singolare in quanto rappresentano un unico oggetto. Quindi utilizzare Menu, non Menus.

• È necessario richiedere qualsiasi classe utilizzata nella classe in cui vengono utilizzati. Ad esempio, è necessario la classe Sencha.model.Menu all'interno della classe Sencha.model.Contact, quindi aggiungerlo all'interno della proprietà requires all'interno Contact.js:

  Ext.define('Sencha.model.Contact', { 
      extend: 'Ext.data.Model', 
      requires: ['Sencha.model.Menu'], 
  
      ... 
  }); 
  

• è necessario utilizzare associationKey nella vostra associazione hasMany come normalmente sarebbe cercare menus (generata da il nome del modello), ma nel tuo JSON è menu.

• hasMany e belongsTo le configurazioni devono essere all'interno del blocco config all'interno dei modelli.

  Ext.define('Sencha.model.Contact', { 
      extend: 'Ext.data.Model', 
      requires: ['Sencha.model.Menu'], 
  
      config: { 
       ... 
  
       hasMany: { 
        model: "Sencha.model.Menu", 
        associationKey: 'menu' 
       } 
      } 
  }); 
  

Per quanto riguarda la soluzione :) - è possibile modificare la itemTpl all'interno della vostra lista per visualizzare associato per il record viene mostrato. Per fare questo, è possibile utilizzare:

<tpl for="associatedModelName"> 
    {field_of_associated_model} 
</tpl> 

Quindi nel tuo caso, si può fare qualcosa di simile:

itemTpl: [ 
    '{name}', 
    '<div>', 
     '<h2><b>Menu</b></h2>', 
     '<tpl for="menus">', 
      '<div> - {item}</div>', 
     '</tpl>', 
    '</div>' 
].join('') 

Qui è un download di un progetto (generato utilizzando gli strumenti SDK), che comprende una demo di questo, usando principalmente il tuo codice: http://rwd.me/FS57