Display list of nested json: Sencha Touch 2

Question

I have a list that displays a list of restaurants with a restaurant logo, etc.

View

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('') } }); 

When you click a restaurant, I want it to show a different list based on the item that was used.

Second view

 Ext.define('Test.view.Menu', { extend: 'Ext.List', xtype: 'contact-menu', config: { title: 'Menu', cls: 'x-contacts', store: 'Contacts', itemTpl: [ '<div>{item}</div>' ].join(''), }, }); 

Models

 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" }); 

Score

 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' } } } }); 

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" }] }] } 

I want to show a list of menu items (item, item, item ...) for the selected restaurant, but when I use the nested list, I have to use the same template as the previous list that does not fit my needs. At the moment, I get the right amount of items, but nothing is displayed. Could you help me where I'm wrong, thanks.

Answer 1

Before moving on to the solution, here are a few problems with your code (which must be fixed before the solution works):

• In your proxy configuration in the Contacts repository for roog your JSON will be rootProperty , not root .

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

  You can also just put this code in your model as you already set up the proxy configuration there. Here both are combined (should be inside your model and remove proxies from the store):

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

• Model names should always be unique, as they represent one object. So use Menu , not Menus .

• You will need to use any classes that you use in the class that you use. For example, you need the Sencha.model.Menu class inside the Sencha.model.Contact class, so add it inside the requires property inside Contact.js :

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

• You need to use associationKey in your hasMany association, as usual, it will look for Menus (generated from the model name), but in your JSON this is Menu .

• hasMany and belongsTo config must be inside the config block in your models.

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

As for the solution :) - you can change your itemTpl inside your list to display it for the displayed entry. For this you can use:

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

So, in your case, you can do something like this:

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

Here is the download of a project (generated using the SDK Tools) that includes a demonstration of this, using mostly your code: http://rwd.me/FS57