Une analyse approfondie de la façon d'utiliser la fonction de regroupement de magasins dans les compétences Extjs_javascript

Au cours de la pratique du projet, j'ai rencontré l'obligation de regrouper les données dans la grille selon un certain champ. Bien entendu, cette fonction est disponible dans l'API et est répertoriée ici pour que tout le monde puisse la trouver :

Deux points à noter :

1. Lors de la création d'un magasin, vous devez définir la valeur de l'attribut groupField, qui est la valeur qui doit être regroupée

par exemple :

Code JavaScript

Ext.define('Person', { 
extend: 'Ext.data.Model', 
fields: ['name', 'sex'] 
}); 

Dans ce modèle de données, nous devons regrouper par sexe, puis veuillez consulter le magasin ci-dessous

Code JavaScript

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

Ensuite, nous devons définir le tpl pour l'affichage de groupe

Code JavaScript

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

Dans gridPanel, le code est le suivant : Configurer les fonctionnalités comme le groupingFeature défini ci-dessus

Code JavaScript

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

Le rendu est le suivant :

Bien sûr, une fois le regroupement implémenté, la colonne sexe dans le gridPanel n'a pas besoin d'être affichée.

Il est à noter que si les données dans la boutique changent, le regroupement peut-il s'afficher normalement ?

Ajoutez maintenant un événement itemclick à la grille, le code est le suivant :

Code JavaScript

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

L'effet est comme indiqué ci-dessous

On voit que l'interface n'est pas celle que l'on souhaite, alors comment la résoudre ? (La solution stupide initiale était de supprimer le GridPanel, de le détruire et de le recharger.) J'ai apporté quelques modifications au code permettant aux auditeurs d'écouter les événements

Code JavaScript

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

Regardez à nouveau l'effet :

C'est l'effet que nous souhaitons. Lors de la modification dynamique des données dans le magasin, le regroupement doit également être implémenté au lieu d'ajouter les données à la fin du GridPanel. La différence entre ces deux morceaux de code réside principalement dans la méthode d'ajout de données au magasin. Le premier est add(record) et le second est loadData(records,[append])

Au début, je ne comprenais pas pourquoi le même magasin ajoutait des données, mais l'effet était différent. Voir l'explication dans la documentation officielle, add(), les nouvelles instances de modèle seront ajoutées à la fin de la collection existante. .(Ajouter des données à la collection. Enfin) J'ai soudain réalisé que loadData charge les données selon les règles du magasin.

De plus, comment supprimer la ligne la plus ancienne du groupe, je l'ai vérifié moi-même, le document a été implémenté, et je le partagerai avec vous ici :

//Modifier les événements d'écoute des auditeurs précédents comme suit :

Faites attention à la méthode first([boolean group]). Si aucun paramètre n'est transmis, les premières données du magasin seront obtenues. Lorsque le paramètre est vrai, le groupe de magasins sera renvoyé avec la clé du nom du groupe et. les premières données du groupe. Une donnée est constituée de plusieurs objets de valeur. PersonStore.first(true).female obtient la première donnée du groupe féminin. Si vous souhaitez obtenir les données chez les hommes, vous pouvez utiliser PersonStore. .first(true).male

Code JavaScript

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

Afin d'éviter que RemoveRecords n'occupe la mémoire, un traitement supplémentaire a été effectué. La fonction peut être implémentée, mais la méthode est un peu maladroite. Si quelqu'un a un bon moyen, nous pouvons communiquer

Regardez le 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)); 
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)); 
} 
}