Anzeige eine Liste von verschachtelten json: Sencha Touch 2

Question

Ich habe eine Liste, die eine Liste von Restaurants mit dem Logo des Restaurants zeigt usw.

Der Blick

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

Wenn Sie das tippen Restaurant Ich möchte, dass es eine andere Liste basierend auf dem getoppten Element zeigt.

Die zweite Ansicht

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

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

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

Die Modelle

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

Der Speicher

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

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

Ich möchte eine Liste von Menüpunkten zeigen (Artikel, Artikel, Artikel ...) für das Restaurant selectedbut, wenn ich eine verschachtelte Liste verwenden muss ich die gleiche Vorlage wie die vorherige verwenden Liste, die nicht meinen Bedürfnissen entspricht. Im Moment bekomme ich die richtige Menge an Gegenständen, aber nichts zeigt. Kannst du mir bitte helfen, wo ich falsch liege, danke.

Answer 1

Bevor ich auf die Lösung zu bekommen, sind hier ein paar Probleme mit Ihrem Code (die behoben werden müssen, bevor die Lösung funktioniert):

• In Ihrem Proxy-Konfiguration innerhalb des Contacts speichern, die Config für die roog von Ihrem JSON ist rootProperty, nicht root.

  Sie können diesen Code auch einfach in Ihr Modell einfügen, da Sie bereits eine Proxy-Konfiguration dort eingefügt haben. Hier sind beide verschmolzen (sollte in Ihrem Modell sein, und entfernen Sie Proxy aus dem Laden):

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

• Modellnamen immer singulär sein sollten, da sie ein Objekt darstellen. Verwenden Sie also Menu, nicht Menus.

• Sie müssen alle Klassen benötigen, die Sie in der Klasse verwenden, in der Sie sie verwenden. Zum Beispiel müssen Sie die Sencha.model.Menu Klasse innerhalb der Sencha.model.Contact Klasse, so fügen Sie es in der requires Eigenschaft innen Contact.js:

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

• Sie benötigen associationKey in Ihrem hasMany Verein verwenden, wie sie normalerweise würde es aussehen, für menus (erzeugt aus der Modellname), aber in Ihrem JSON ist es menu.

• hasMany und belongsTo Configs sollte innerhalb config Block in Ihren Modellen sein.

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

Was die Lösung :) - Sie können Ihre itemTpl in Ihrer Liste ändern für den Datensatz gezeigt wird, zugeordnet angezeigt werden soll. Um dies zu tun, können Sie verwenden:

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

Also in Ihrem Fall können Sie etwas tun:

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

hier ein Download eines Projektes (erzeugt die SDK-Tools), die enthält eine Demo davon, mit meist Ihren Code: http://rwd.me/FS57