An in-depth analysis of the use of grouping functions in store in ExtJS _javascript skills

In the course of project practice, we encounter the need to group data in grid according to a field, of course, this feature is included in the API, here for everyone to find:

Two points to note:

1. When you create the store, you need to set the value of the GroupField property, which is the value to be grouped

For example:

JavaScript code

Ext.define (' person ', { 
extend: ' Ext.data.Model ', 
fields: [' name ', ' sex '] 

In this data model, we need to be grouped by gender (sex), so look at the store below

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

Next, we need to define the TPL for the group display

JavaScript code

var groupingfeature= ext.create (' Ext.grid.feature.Grouping ', { 
groupheadertpl: ' Sex: {name} ({rows.length} item{[ Values.rows.length > 1? "s": ""]}) ' 

In Gridpanel, the code is as follows: Configure features as defined above Groupingfeature

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

The effect chart is as follows:

Of course, after grouping, in Gridpanel sex This column can not be displayed.

Note that if the data in the store is changing, can the grouping be displayed normally?

Now add a ItemClick event to the grid with the following code:

JavaScript code

listeners:{ 
itemclick:function (thisview,record) { 
personstore.<span style= "color: #ff0000;" >add</span> ([{name: "Li", Sex: "Male"},{name: "Zhang", Sex: "female"}]); 
 

The effect of the following figure

It can be seen that the interface is not what we want, then how to solve it? (The first stupid solution is I remove and destroy this gridpanel, reload) I've made some changes to the code that listeners the listening event.

JavaScript code

listeners:{ 
itemclick:function (thisview,record) { 
personstore.loaddata ([{name: "Li", Sex: "Male"},{name: " Zhang ", Sex:" female "}], true); 
 

Then look at the effect:

This is what we want to do, when the data in the store is dynamically changed, the grouping is implemented instead of appending the data to the end of the Gridpanel. The distinction between the two pieces of code, mainly in the store to add data method, the former is add (record), the latter is LoadData (Records,[append])

At first it was not possible to understand why the store added the data, but the effect was different, as explained in the official document, add (), the new Model instances will is added at the end of the existing collection. (Append data to the end of the collection) it dawned on LoadData that the data was loaded in accordance with the rules of the store.

In addition, how to remove the oldest row in the group, check it yourself, the document is realized, here to share with you:

Modify the previous listeners listener event as follows:

Note that the first ([Boolean Group]) method, if you do not pass the argument, gets the number one in the store, and when the argument is true, the store group is returned with a group name of key, and the first data in the group is the value of multiple objects, Personstore.first (true). Female gets the first piece of data in the female group, and you can use Personstore.first (true) to get the male. 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));
} 

In order to avoid removedrecords memory, the further processing, the function can be achieved, but the method is somewhat stupid, we have a good way to communicate

Look at the 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);//Whether this sentence can be 
personstore.loadrecords (RECs), or reload data, memory recorded in the removed out of the 
Console.log (personstore); 
alert (PersonStore.getRemovedRecords.length);//This alert result is 0 
//console.log (Personstore.getat (0)); 
}