Analyse approfondie de la façon d'utiliser la fonction de regroupement de magasins dans les extjs

Au cours du processus de pratique du projet, nous rencontrons l'exigence que les données de la grille sont regroupées en fonction d'un certain domaine. Bien sûr, cette fonction est disponible dans l'API, et elle est répertoriée ici pour que tout le monde puisse trouver:

Deux choses à noter:

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

Par exemple:

Code javascript

 Ext.define ('Person', {Extend: 'ext.ata.model', champs: ['name', 'sexe']});

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

Code javascript

 var personstore = ext.create ('ext.data.store', {StoreId: 'Personstore', modèle: 'Person', Groupfield: 'Sex', Data: [{name: 'hongmei li', sexe: 'femelle'}, {name: 'San Zhang', Sex: ','}, {name: 'jim green', sex: ' 'Femme'}, {nom: 'Lucy', sexe: 'femelle'}]});

Ensuite, nous devons définir le TPL affiché dans le groupe

Code javascript

 var groulieingFeature = ext.create ('ext.grid.feature.grouping', {Groupheadertpl: 'sexe: {name} ({Rows.length}

Dans GridPanel, le code est le suivant: Configurer les fonctionnalités du groupement Fermé 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' }]});

Les rendus sont les suivants:

Bien sûr, après la mise en œuvre du regroupement, la colonne sexuelle dans GridPanel n'a pas besoin d'être affichée.

Il convient de noter que si les données du magasin changent, le regroupement peut-il être affiché normalement?

Ajoutez maintenant un événement ItemClick à Grid, le code est le suivant:

Code javascript

 Écouteurs: {itemclick: function (thisView, enregistre) {Personstore. <span style = "Color: # ff0000;"> add </span> ([{name: "li", sexe: "mâle"}, {name: "zhang", sexe: "féminin"}]); }}

L'effet est le suivant

On peut voir que l'interface n'est pas ce que nous voulons, alors comment le résoudre? (La solution stupide au début a été que j'ai supprimé et détruit ce GridPanel, rechargé) J'ai fait des transformations du code qui a écouté l'événement en écoutant les auditeurs

Code javascript

 Écouteurs: {itemClick: function (thisView, enregistre) {personstore.loadData ([{name: "li", sexe: "mâle"}, {name: "zhang", sexe: "femelle"}], true); }}

Regardez à nouveau l'effet:

C'est l'effet que nous voulons. Lors de la modification dynamique des données dans le magasin, le regroupement doit également être implémenté, plutôt que d'ajouter les données à la fin du gridpanel. Correspondant à la distinction entre ces deux pièces de code, l'essentiel est la méthode d'ajouter des données dans le magasin. Le premier est ajouter (enregistrer) et le second est LoadData (enregistrements, [APPEND])

Au début, je ne pouvais pas comprendre pourquoi le magasin a ajouté des données, mais l'effet était différent. J'ai lu l'explication du document officiel, ADD (), les nouvelles instances de modèle seront ajoutées à la fin de la collection existante. (Ajouter des données à la fin de la collecte) J'ai soudainement réalisé que LoadData charge les données en fonction des règles du magasin.

De plus, comment supprimer la ligne la plus ancienne du groupe, je l'ai vérifiée moi-même et le document a été mis en œuvre. Je vais le partager avec vous ici:

// Modifiez l'événement d'écoute des auditeurs précédents comme suit:

Notez que la première méthode ([groupe booléen]), si le paramètre n'est pas passé, les premières données du magasin sont obtenues. Lorsque le paramètre est vrai, le retour est un groupe de magasins avec la clé de nom de groupe et les premières données du groupe sont de valeur. Personstore.first (true) .Female obtient les premières données du groupe féminin. Si vous souhaitez obtenir le mâle, vous pouvez utiliser Personstore.first (true) .male

Code javascript

 Écouteurs: {itemClick: function (thisView, enregistre) {personstore.loadData ([{name: "li", sexe: "mâle"}, {name: "zhang", sexe: "femelle"}], 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 l'occupation de la mémoire des records supprimés, un traitement supplémentaire a été effectué. La fonction peut être implémentée, mais la méthode est un peu stupide. Tout le monde a un bon moyen de communiquer.

Regardez le code:

 Écouteurs: {itemClick: function (thisView, enregistre) {personstore.loadData ([{name: "li", sexe: "mâle"}, {name: "zhang", sexe: "femelle"}], 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) ;//Anything peut être effectué avec cette phrase Personstore.LoadRecords (RECS); // Recharger les données, et le supprimé enregistré dans la mémoire sera parti Console.log (Personstore); alert (personstore.getReMovedRecords.Length); // Ce résultat d'alerte de phrase est 0 // console.log (personnestore.getat (0)); }}