Grouping Extjs

this time I will explain about how to create a grouping or a grouping using extjs. Grouping or clustering is very useful or useful when we want to classify some data or files into the type of data or files or the same kind.

For example grouping students based on class. What goal? it'll be easier in search of data, and can find out the amount of data or files easy. Below is an example screen shot of grouping based on the force I created using extjs.

From the snapshot we can see the amount of each generation.

How do I create a display like the above? If you've never learned before extjs, then I suggest to read my previous posts :Tutorial Form Grid Extjs : Expanded Row, Collapse, dan Icon Grid, because all the data I use refers to the previous tutorial.
Here is the source code is the core of this tutorial:

.............
GrupStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'group.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id',
fields: [ //nama field atau kolom dari database
'id','nama','alamat','angkatan'
]

}),
sortInfo:{field: 'angkatan', direction: "ASC"},//diurutkan berdasarkan urutan angkatan secara ascending
groupField:'angkatan' //dikelompokkan berdasarkan angkatan

});

..........
GrupListingEditorGrid = new Ext.grid.GridPanel({
title: 'Grid Grouping',
store: GrupStore,
cm: GrupColumnModel,
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),

frame:true,
collapsible: true,//manggil fungsi collaps
animCollapse: true,//memberikan animasi pada collaps
iconCls: 'icon-grid',//menambahkan icon pada grid
width:430,
height:280,
...........source code that color is red is the core of this tutorial.

kamu bisa mendownload Source code lengkapnya disni.