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.






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

Thanks for reading about Tutorial Form Grid Extjs : Grouping Extjs

+ comments + 3 comments

Anonymous
May 13, 2009 at 3:45 AM

Assalam,..
mas saya sedang tertarik dengan teknologi extjs kalo bisa buatin contoh tentang pembuatan tree dengan extjs dan php
terimakasih....
by: epunk@cs.its.ac.id

agung
September 14, 2009 at 12:30 AM

misalnya kita mau menampilkan data barang berdasarkan kategori yg mana kategori nya menggunakan combobox dan kita tampilkan ke datagrid gmana yah?? saya sudah coba menampilkan data ke grid dengan paging menggunakan param di datastore nya tapi saat pertama aja muncul datanya tapi data di page kedua tidak muncul, mohon pencerahaan nya...

January 30, 2010 at 12:39 PM

Masalahnya gini saya punya table inventaris dan ketika button “Detail Data” diklik maka akan tampil hanya data dari Table History(Form ke-2) yg kode pada table history = kode pd table inventaris.
Nah, gmn caranya mas??? di bawah ini masih tampil semua…
saya sudah tambahkan gini…
var m = data_inventaris_grid.getSelections();
var GrupStore_data_history = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'data_history.php?kode='+ m[0].get('kode'),
method: 'POST'
}),
baseParams:{task: "LISTING"},
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id',
fields: ['id','tgl','history','kode']
}),
sortInfo:{field: 'id', direction: "ASC"}
});
GrupStore_data_history.load({params:{start:0,limit:10}});

KET : data_inventaris_grid adalah Ext.grid.GridPanel dari table inventaris
baseParams “LISTING “ mengacu pada sql query pada data_history.php
dengan $SQL = mysql_query(“SELECT * FROM history WHERE kode = $_GET(“kode”)”);
tapi tetep tampil smw..pake listeners: {load: handleActivate}, juga gak bisa Maz.KENAPA ya maz…???
Dan gimana solusinya…????
Best Regards

Post a Comment