Group By Functionality

[GordS]

We just upgraded to Valence 2.2 from Valence 2.1. My tester noticed that this functionality does not work like it use to. Here is her comment:

"When do a group by field it will only group it properly if the field is already sorted by that field."

Was this changed in ExtJS 3.2.2?

[richard.milone]

I'm not aware of any behavior differences in the Group By functionality. Can you give a specific scenario using one of the Valence examples or portal administration programs?

[GordS]

If you run the Options Valence Administration program, you will see what she means. When it comes up you will see that it is grouped by status. If you change it to group by option type, you see it grouped several times by for example Run A Valence Application. Why is that?

[richard.milone]

This does appear to be a behavior change between Ext JS 3.1.0 and Ext JS 3.2.2 because the GroupingStore definitions within the Valence portal admin programs were not changed. We'll make a note of this for Valence 3.0. In order for grouping to be useful we should probably implement remote back end grouping. Currently it's only grouping the front end page anyway, so this has limited value.

[GordS]

I had some time do some more research on this issue and this is what is happening.

I have attached a zip file of my code for reference.

When you click the option in the navigation tree it does action getRecords and Firebug tells me "sort PMLASTNAME" which is correct.

I click on City column and tell it Sort in Ascending Order. Firebug tells me "sort PMCITY" which is correct.

Then next I click on the city column and tell it to Group by This Field. Firebug tells me "sort PMLASTNAME" which is incorrect. The sort should still be by "PMCITY".

What is causing the sort field to be changed?

Thanks in advance.

[GordS]

We added the the code highlighted in red to the groupingStore definition and it fixed the problem. Thanks to Richard for all his help.


var dsMainPRAPRTLISTGrid = new Ext.data.GroupingStore({
autoLoad: true,
url: "vvcall.pgm",
remoteSort: true,
sortInfo: {
field: 'PMLASTNAME',
direction: 'asc'
},
groupOnSort: true, reader: new Ext.data.JsonReader({
root: "autogrid",
totalProperty: "totalCount",
fields: ["PMID", "PLSALUTATN", "PMFIRSTNAM", "PMLASTNAME", "PMCOMPANY", "PMSTRADDR1", "PMSTRADDR2", "PMCITY", "PMPROVINCE", "PMPOSTALZP", "PMPRIPHONE", "PMACTMANGR", "PGDESCRIPT", "PMEMAILADR", "PMSTAGE", "PMCOLOUR", "PACOMPDATE"]
}),
listeners: {
beforeload: function(){
this.baseParams = {
pgm: 'PRAPRTLIST',
search: Ext.getCmp('search').getValue(),
action: 'getRecords',
limit: 25,
start: 0
};
}
}
});

[GordS]

I did some more work with this and we have taken out the previous line of code added. The side effect that we do not want is that the grid is grouped automatically. We want that to be the user's choice.

Without the line of code added the Group By This Field does not work. But it is far worse to have it grouped in a bizarre manner initially. It will confuse the user.

Any other suggestions so that the Group by will work and will only be displayed when the user chooses to use it?

[GordS]

With help from Richard we have figured out how to make this work. According to Richard there was a change made to grouping in ExtJs 3.2. To make it work the same as it did in ExtJs 3.1 we had to change our html code.

Here is an example of what worked in 3.1.


var dsMainAPMPFILGrid = new Ext.data.GroupingStore({
autoLoad: true,
url: "vvcall.pgm",
remoteSort: true,
sortInfo: {
field: 'PFNAME',
direction: 'asc'
},
reader: new Ext.data.JsonReader({
root: "autogrid",
totalProperty: "totalCount",
fields: ["PFNAME", "PFDESCRIPT", "PFTYPE"]
}),
listeners: {
beforeload: function(){
this.baseParams = {
pgm: 'APMPFIL',
search: Ext.getCmp('search').getValue(),
action: 'getRecords',
limit: 25,
start: 0
};
}
}
});


Here is the code changed to work in ExtJs 3.2 the same as ExtJs 3.1. The changed code is highlighted in red.


var dsMainAPMPFILGrid = new Ext.data.GroupingStore({
autoLoad: true,
url: "vvcall.pgm",
remoteSort: true,
remoteGroup: true,
baseParams: {
pgm: 'APMPFIL',
action: 'getRecords',
limit: 25,
start: 0
}, sortInfo: {
field: 'PFNAME',
direction: 'asc'
},
reader: new Ext.data.JsonReader({
root: "autogrid",
totalProperty: "totalCount",
fields: ["PFNAME", "PFDESCRIPT", "PFTYPE"]
}),
listeners: {
beforeload: function(){
this.baseParams.search = Ext.getCmp('search').getValue(); }
}
});


This made it work exactly like it did before Valence upgraded to ExtJs 3.2.

If you look at Firebug when you select Group by This Field you will see the following:


action getRecords
dir ASC
groupBy PFTYPE
groupDir ASC
limit 25
opt 1003
pgm APMPFIL
search
sort PFNAME
start 0

To make the Group By to work properly you had to sort by the column before doing the Group By for this field. By changing our back end code we can both in one step.

Her is the previous version of oue get GetPostParametres procedure.


p GetPostParameters...
p b
d pi

/free
post_Start=vvIn_num('start');
post_Limit=vvIn_num('limit');
post_Sort =vvIn_char('sort');
post_SortDir=vvIn_char('dir');
post_Search = vvIn_char('search');
/end-free
p e


To reduce it to one step we read the new information that ExtJs provides and changed GetPostParamters to the following.


p GetPostParameters...
p b
d pi
d post_GroupBy s 10a /free
post_Start=vvIn_num('start');
post_Limit=vvIn_num('limit');
post_GroupBy =vvIn_char('groupBy');
If post_GroupBy = *Blanks;
post_Sort =vvIn_char('sort');
post_SortDir=vvIn_char('dir');
Else;
post_Sort = post_GroupBy;
post_SortDir =vvIn_char('groupDir');
EndIf;
post_Search = vvIn_char('search');
/end-free
p e