Eine ausführliche Analyse der Verwendung der Store-Gruppierungsfunktion in Extjs_javascript-Kenntnissen

Während der Projektpraxis bin ich auf die Anforderung gestoßen, die Daten im Raster nach einem bestimmten Feld zu gruppieren. Diese Funktion ist natürlich in der API verfügbar und hier aufgeführt, damit jeder sie finden kann:

Zwei Punkte, die Sie beachten sollten:

1. Beim Erstellen eines Shops müssen Sie den Wert des Attributs „groupField“ festlegen, das ist der 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 nach Geschlecht gruppieren, dann sehen Sie sich bitte den Store 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: 'female' 
},{ 
name: 'Lucy', 
sex: 'female' 
}] 
}); 

Als nächstes müssen wir den TPL für die Gruppenanzeige definieren

JavaScript-Code

var groupingFeature= Ext.create('Ext.grid.feature.Grouping',{ 
groupHeaderTpl: 'sex: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})' 
});//注意其中{name}即为store中sex列所对应的值 

In GridPanel lautet der Code wie folgt: Konfigurieren Sie Features wie das oben definierte 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 Darstellung ist wie folgt:

Natürlich muss die Geschlechtsspalte im GridPanel nach der Implementierung der Gruppierung nicht angezeigt werden.

Es ist zu beachten, dass die Gruppierung normal angezeigt werden kann, wenn sich die Daten im Geschäft ändern.

Fügen Sie nun ein Itemclick-Ereignis zum Raster hinzu. Der Code lautet wie folgt:

JavaScript-Code

listeners:{ 
itemclick:function(thisview,record){ 
PersonStore.<span style="color:#ff0000;">add</span>([{name:"li",sex:"male"},{name:"zhang",sex:"female"}]); 
} 
} 

Der Effekt ist wie unten gezeigt

Es ist ersichtlich, dass die Schnittstelle nicht unseren Wünschen entspricht. Wie können wir sie also lösen? (Die anfängliche dumme Lösung bestand darin, dass ich das GridPanel entfernt, zerstört und neu geladen habe.) Ich habe einige Änderungen am Code vorgenommen, damit Listener Ereignisse abhören können

JavaScript-Code

listeners:{ 
itemclick: function (thisview,record){ 
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true ); 
} 
} 

Sehen Sie sich die Wirkung noch einmal an:

Dies ist der gewünschte Effekt. Wenn Sie die Daten im Speicher dynamisch ändern, muss auch eine Gruppierung implementiert werden, anstatt die Daten an das Ende des GridPanels anzuhängen. Der Unterschied zwischen diesen beiden Codeteilen liegt hauptsächlich in der Methode zum Hinzufügen von Daten zum Speicher. Ersteres ist add(record) und letzteres ist loadData(records,[append])

Zuerst konnte ich nicht verstehen, warum derselbe Speicher Daten hinzufügte, aber der Effekt war anders. Siehe die Erklärung in der offiziellen Dokumentation, add(). Die neuen Modellinstanzen werden am Ende der vorhandenen Sammlung hinzugefügt . (Fügen Sie Daten zur Sammlung hinzu. Endlich) Mir wurde plötzlich klar, dass LoadData Daten gemäß den Regeln des Geschäfts lädt.

Außerdem habe ich selbst überprüft, wie man die älteste Zeile in der Gruppe entfernt, das Dokument wurde implementiert und ich werde es hier mit Ihnen teilen:

//Ändern Sie die Hörereignisse der vorherigen Zuhörer wie folgt:

Achten Sie auf die erste Methode ([boolesche Gruppe]), wenn keine Parameter übergeben werden. Wenn der Parameter wahr ist, wird die Geschäftsgruppe mit dem Gruppennamenschlüssel zurückgegeben Die ersten Daten in der Gruppe sind mehrere Wertobjekte. PersonStore.first(true).female erhält die ersten Daten in der weiblichen Gruppe. Wenn Sie die Daten in männlicher Form abrufen möchten .first(true).male

JavaScript-Code

listeners:{ 
itemclick: function (thisview,record){ 
PersonStore.loadData([{name: "li" ,sex: "male" },{name: "zhang" ,sex: "female" }], true ); 
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 zu verhindern, dass RemovedRecords den Speicher belegen, wurde die Funktion implementiert, aber die Methode ist etwas umständlich. Wenn jemand einen guten Weg hat, können wir kommunizieren

Sehen Sie sich den Code an:

listeners:{ 
itemclick:function(thisview,record){ 
PersonStore.loadData([{name:"li",sex:"male"},{name:"zhang",sex:"female"}],true); 
alert(PersonStore.first(true).female.get('name')); 
console.log(PersonStore.first(true)); 
PersonStore.remove(PersonStore.first(true).female); 
var recs = PersonStore.getRange(); 
console.log(recs); 
//PersonStore.removeAll(true);//这句有没有都可以 
PersonStore.loadRecords(recs);//重新load数据，内存中记录的removed掉的就没有了 
console.log(PersonStore); 
alert(PersonStore.getRemovedRecords.length);//这句alert结果为0 
// console.log(PersonStore.getAt(0)); 
} 
}