Eingehende Analyse zur Verwendung der Store-Gruppierungsfunktion in ExtJs

Während des Projekts der Projektpraxis begegnen wir auf die Anforderung, dass die Daten in Grid nach einem bestimmten Bereich gruppiert sind. Natürlich ist diese Funktion in der API verfügbar und ist hier aufgeführt, damit jeder es finden kann:

Zwei Dinge zu beachten:

1. Beim Erstellen eines Geschäfts müssen Sie den Wert des Gruppfield -Attributs festlegen, dh den Wert, der gruppiert werden muss.

Zum Beispiel:

JavaScript -Code

 Ext.Define ('Person', {extend: 'ext.data.model', fields: ['name', 'sex']});

In diesem Datenmodell müssen wir uns nach Geschlecht (Sex) gruppieren. Sehen Sie sich also den Laden unten an

JavaScript -Code

 var PersonStore = Ext.create('Ext.data.Store', { storeId: 'PersonStore', model: 'Person', groupField: 'sex', data: [{ name: 'hongmei li', sex: 'female' },{ name: 'san zhang', sex: 'male' },{ name: 'Jim Green', sex: 'male' },{ name: 'Lily', sex: 'weiblich'}, {name: 'lucy', sex: 'weiblich'}]});

Als nächstes müssen wir die in der Gruppe angezeigte TPL definieren

JavaScript -Code

 var gruppingFeature = ext.create ('ext.grid.feature.grouping', {grupphedeTpl: 'sex: {name} ({rows.length} item {[values.rows.Length> 1? "

In Gridpanel lautet der Code wie folgt: Konfigurieren Sie die oben definierten Features mit der oben definierten Gruppierungsfeature

JavaScript -Code

 var grid = Ext.create('Ext.grid.Panel', { renderTo: Ext.getBody(), store: PersonStore, width: 600, height: 400, title: 'Person', features: [groupingFeature], columns: [{ text: 'Name', flex: 1, dataIndex: 'name' },{ text: 'sex', flex: 1, dataIndex: 'sex' }] });

Die Renderings sind wie folgt:

Nach der Implementierung der Gruppierung muss die Sexsäule in Gridpanel natürlich nicht angezeigt werden.

Es ist zu beachten, dass die Gruppierung normal angezeigt werden kann, wenn sich die Daten im Speicher ändert?

Fügen Sie nun ein ItemClick -Ereignis in das Netz hinzu, der Code lautet wie folgt:

JavaScript -Code

 Hörer: {itemClick: function (thisview, record) {personStore. <span style = "color:#ff0000;"> add </span> ([{name: "li", sex: "männlich"}, {name: "zhang", sex: "weiblich"}]); }}

Der Effekt ist wie folgt

Es ist zu sehen, dass die Schnittstelle nicht das ist, was wir wollen. Wie kann man sie also lösen? (Die dumme Lösung am Anfang war, dass ich dieses Gridpanel entfernt und zerstört habe.

JavaScript -Code

 Hörer: {itemClick: function (thisview, record) {personStore.loadData ([{name: "li", sex: "männlich"}, {name: "zhang", sex: "weiblich"}], wahr); }}

Schauen Sie sich den Effekt noch einmal an:

Dies ist der Effekt, den wir wollen. Wenn die Daten im Speicher dynamisch geändert werden, muss auch die Gruppierung implementiert werden, anstatt die Daten an das Ende des Gridpanels anzuhängen. Entsprechend der Unterscheidung zwischen diesen beiden Codeteilen ist die Hauptsache die Methode zum Hinzufügen von Daten im Speicher. Ersteres ist Add (Datensatz) und letzteres ist loaddata (Datensätze, [anhängen])

Zuerst konnte ich nicht verstehen, warum der Store Daten hinzugefügt wurde, aber der Effekt war anders. Ich habe die Erläuterung des offiziellen Dokuments, add (), gelesen, die neuen Modellinstanzen werden am Ende der vorhandenen Sammlung hinzugefügt. (Fügen Sie Daten am Ende der Sammlung hinzu) Ich stellte plötzlich fest, dass Loaddata die Daten gemäß den Store -Regeln lädt.

Darüber hinaus habe ich sie selbst überprüft und das Dokument wurde implementiert. Ich werde es hier mit Ihnen teilen:

// Die vorherigen Hörer -Hörereignisse wie folgt ändern:

Beachten Sie, dass die erste ([Boolean -Gruppe]) Methode, wenn der Parameter nicht übergeben wird, die ersten Daten im Speicher erhalten werden. Wenn der Parameter wahr ist, ist die Rückgabe eine Speichergruppe mit dem Gruppennamenschlüssel und die ersten Daten in der Gruppe sind Wert. PersonStore.First (True) .Female erhält die ersten Daten in der weiblichen Gruppe. Wenn Sie das Mann erhalten möchten, können Sie personStore.First (true) verwenden .Male

JavaScript -Code

 Hörer: {itemClick: function (thisview, record) {personStore.loadData ([{name: "li", sex: "männlich"}, {name: "zhang", sex: "weiblich"}], wahr); alert (personStore.First (true) .Female.get ('name')); console.log (PersonStore.First (true) .Female); PersonStore.remove (personStore.First (true) .female); // console.log (personStore.getat (0));}}

Um die Speicherbelastung von entfernten Rekörtern zu vermeiden, wurde eine weitere Verarbeitung durchgeführt. Die Funktion kann implementiert werden, aber die Methode ist etwas dumm. Jeder hat eine gute Möglichkeit zu kommunizieren.

Schauen Sie sich den Code an:

 Hörer: {itemClick: function (thisview, record) {personStore.loadData ([{name: "li", sex: "männlich"}, {name: "zhang", sex: "weiblich"}], wahr); alert (personStore.First (true) .Female.get ('name')); console.log (PersonStore.First (wahr)); PersonStore.remove (personStore.First (true) .female); var recs = personStore.getRange (); console.log (RECS); //PersonStore.removeall(True);//anything kann mit diesem Satz personStore.loadRecords (RECS); // Die Daten neu laden, und die im Speicher aufgezeichneten im Speicher aufgezeichneten wird Console.log (PersonStore); alert (personStore.getRemovedRecords.length); // Dieses Satz -Warn -Ergebnis ist 0 // console.log (personStore.getat (0)); }}