In-depth analysis on how to use the store grouping function in Extjs _ javascript tips-js tutorial

This article mainly introduces how to use the store grouping function in Extjs. If you need it, you can refer to it in the project practice process, when you need to group data in the grid according to a certain field, of course, this function is available in the api and listed here for your search:

Two notes:

1. When creating a store, you must set the value of the groupField attribute, that is, the value of the group to be created.

For example:

JavaScript code

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

In this data model, we need to group data by sex.

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

JavaScript code

Var groupingFeature = Ext. create ('ext. grid. feature. grouping ', {groupHeaderTpl: 'sex: {name} ({rows. length} Item {[values. rows. length> 1? "S": ""]}) '}); // note that {name} is the value corresponding to the sex column in store.

In gridPanel, the Code is as follows: Configure features as the groupingFeature defined above

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

As follows:

Of course, after grouping is implemented, the sex column in gridPanel does not need to be displayed.

Note that if the data in the store changes, can the group be displayed normally?

Add an itemclick event to the grid. The Code is as follows:

JavaScript code

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

Results:

As we can see, the interface is not what we want, so how can we solve it? (The first stupid solution was to remove, destroy, and reload the gridPanel.) I made some changes to the Code of the listeners listening event.

JavaScript code

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

Then let's look at the effect:

This is what we want. When the data in the store is dynamically changed, grouping should also be implemented, rather than appending the data to the end of the gridPanel. The difference between the two codes mainly lies in the method for adding data to store. The former is add (record), and the latter is loadData (records, [append]).

At first, I couldn't understand why I added data to The store, but the results were different. For details, see the official documentation. add (), The new Model instances will be added at the end of the existing collection. (append data to the end of the Set) I suddenly realized that loadData loads data according to the store rules.

In addition, how to remove the oldest row in the group, I checked it myself, and the document was implemented. Here I will share with you:

// Modify the previous listeners listening event as follows:

Note that the first ([boolean group]) method obtains the first data in the store if no parameter is set. If the parameter is set to true, the store group is returned with the group name key, the first data in the group is the value of multiple objects, PersonStore. first (true ). female obtains the first data in the female group. To obtain data in male, you can use PersonStore. 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));} }

In order to avoid removedRecords from occupying the memory, the function can be further implemented, but the method is a bit stupid. You can exchange ideas in a good way.

Check 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); // can this statement be used for PersonStore. loadRecords (recs); // load the data again. If the removed recorded in the memory is lost, the console is unavailable. log (PersonStore); alert (PersonStore. getRemovedRecords. length); // The alert result is 0 // console. log (PersonStore. getAt (0 ));}}