Ext.list.Tree speichern und Vorlagen

Question

In Ext JS 6 Listen sind nicht mehr im Vergleich zu Touch 2.4 Ext.List zum Beispiel. Also habe ich versucht, einen Baumspeicher zu erstellen und diesen an einen Ext.list.Tree zu binden. Das scheint in Ordnung zu sein, obwohl ich keine Ahnung habe, wie man eine Vorlage für die Listenelemente erstellt. Ich habe den folgenden Code:

Mein Modell sieht wie folgt aus:

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'name', type: 'string'}, 
     {name: 'phoneNumber', type: 'string'} 
    ] 
}); 

Next Ich habe einige Daten:

var data = { 
    users: [ 
     { 
      name: 'Ed Spencer', 
      phoneNumber: '555 1234' 
     }, 
     { 
      name: 'Abe Elias', 
      phoneNumber: '666 1234' 
     } 
    ] 
}; 

Als nächstes wird die Definition des Ladens ist:

var store = Ext.create('Ext.data.TreeStore', { 
    autoLoad: true, 
    model: 'User', 
    data : data, 
    expanded: true, 
    defaultRootProperty: 'users', 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      rootProperty: 'users' 
     } 
    } 
}); 

Und last but not least binde ich den Laden an meine Baumspezies:

In der Dokumentation sieht es aus wie ich muss eine Texteigenschaft angeben, die dann wahrscheinlich automatisch in der Liste angezeigt wird, aber ich möchte nicht nur Text anzeigen, ich möchte eine Kombination aus Name und Telefonnummer erstellen in diesem Beispiel.

Ich habe keine Ahnung, wie ich jetzt fortfahren soll, da ich nicht weiß, wie ich meine Daten in der Liste/Struktur anzeigen soll. Hoffentlich kann jemand helfen. Ich habe auch eine Sencha Fiddle hier verfügbar: https://fiddle.sencha.com/#fiddle/1el1

Answer 1

Die Lösung ist nicht Ext.list.Tree, sondern Ext.List/Ext.dataview.List stattdessen zu verwenden. Ich habe in der klassischen Dokumentation nachgeschaut, während ich in die moderne Dokumentation schauen sollte.

Ich habe jetzt den folgenden Speicher:

var store = Ext.create('Ext.data.Store', { 
    autoLoad: true, 
    model: 'User', 
    data : data, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      rootProperty: 'users' 
     } 
    } 
}); 

und die folgende Liste machen:

// don't render the list, but add it to the viewport instead 
Ext.Viewport.add(Ext.create('Ext.List', { 
    title: 'simple list', 
     store: store, 
     itemTpl: '{name}, {phoneNumber}' 
})); 

Das Modell und die Daten bleibt gleich.

Ich habe auch die Geige aktualisiert, damit es richtig angezeigt werden: https://fiddle.sencha.com/#fiddle/1el1