View Full Version : Sort group descending in a GridPanel

23 Feb 2010, 6:14 AM
Hello, I am using a GridPanel with a GroupingView and a GroupingStore.. It works perfectly except that I cannot figure out how to sort the groups by values descending. All the data is local in the in an array, which is in the right order. It seems that the group is locally sorted ascending because it shows in that order in the grid.

In short, the group contains a date field and it would be important to show the latest information on top of the grid.

How can it be done?

Thank you very much!

Marc Lacoursiere
RooSoft Computing inc.

23 Feb 2010, 6:24 AM
Just confirm that you are setting sortInfo on the GroupingStore (http://www.extjs.com/deploy/dev/docs/?class=Ext.data.GroupingStore). Can you post a short example of it not working?

23 Feb 2010, 6:32 AM
Yes I do! But is seems to sort inside groups. No matter which I choose between ASC or DESC in sortInfo, it doesn't have the desired effect.

I want to sort groups themselves in descending order.

var storeData = [
[19,'Lacoursière, Marc','2010-02-10 11:40','Ajout','Telephone','De jour','','Oui'],
[19,'Lacoursière, Marc','2010-02-10 11:40','Ajout','Telephone','De soir','','Non'],
[18,'Lacoursière, Marc','2010-01-27 16:17','Mise à jour','Occupant','Pr‚nom de l\'occupant','Powder','Powdered'],
[18,'Lacoursière, Marc','2010-01-27 16:17','Mise à jour','Occupant','Nom de l\'occupant','Boom','Boomy'],
[17,'Lacoursière, Marc','2010-01-27 09:35','Mise à jour','Occupant','Pr‚nom de l\'occupant','Powered','Powder'],
[16,'Lacoursière, Marc','2010-01-27 09:35','Mise à jour','Occupant','Pr‚nom de l\'occupant','Power','Powered'],
[12,'Lacoursière, Marc','2010-01-26 20:06','Mise à jour','Détails du revenu d\'un occupant','Unitaire','55.00','600.00']

function valeurOriginaleRenderer(val) {
return '<span style="color:red;">' + val + '</span>';

function valeurNouvelleRenderer(val) {
return '<span style="color:green;">' + val + '</span>';

var grille;
var groupingStore;

Ext.onReady(function() {

groupingStore = new Ext.data.GroupingStore({
data: storeData,
sortInfo:{field: 'Quand', direction: 'ASC'},
reader: new Ext.data.ArrayReader({ id: 'id' }, [

grille = new Ext.grid.GridPanel({
renderTo: "tableauHistorique",
frame: true,
height: 350,
width: 910,
store: groupingStore,
view: new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{[values.rs[0].data.Qui]} - {[values.rs[0].data.Quand]} - {[values.rs[0].data.Action]} - {[values.rs[0].data.Contexte]} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
columns: [
{ header: "NoTransaction", dataIndex: 'NoTransaction', sortable: true },
{ header: "Qui", dataIndex: 'Qui', sortable: true },
{ header: "Quand", dataIndex: 'Quand', sortable: true },
{ header: "Action", dataIndex: 'Action', sortable: true },
{ header: "Contexte", dataIndex: 'Contexte', sortable: true },
{ header: "Champ", dataIndex: 'Champ', sortable: true },
{ header: "Valeur Originale", dataIndex: 'ValeurOriginale', sortable: true, renderer: valeurOriginaleRenderer },
{ header: "Nouvelle Valeur", Color: '#0000FF', dataIndex: 'ValeurNouvelle', sortable: true, renderer: valeurNouvelleRenderer }


23 Feb 2010, 6:58 AM
Add "groupOnSort: true" to the GroupingStore's config.

23 Feb 2010, 7:09 AM
Thanks fay!

It works well, but I still think thant it would be fine to be able to sort groups without that option turned on.