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{
proxy: new{
url: 'group.php',
method: 'POST'
reader: new{
root: 'results',
totalProperty: 'total',
id: 'id',
fields: [ //nama field atau kolom dari database

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({
groupTextTpl: '{text} ({[]} {[ > 1 ? "Items" : "Item"]})'

collapsible: true,//manggil fungsi collaps
animCollapse: true,//memberikan animasi pada collaps
iconCls: 'icon-grid',//menambahkan icon pada grid


source code that color is red is the core of this tutorial.

kamu bisa mendownload Source code lengkapnya disni.

Title: Tutorial Form Grid Extjs : Grouping Extjs
Posted by faisal

Thanks for reading about Tutorial Form Grid Extjs : Grouping Extjs