Multiple level of grouping in grids

[mcouillard]

Fantastic extension! Works very well out of the box. I can't wait to see how this evolves.

[tchitani]

Hi

I just curios to know why the command like:

Ext.getCmp('ext-comp-1002').getStore().groupBy(['col_name1','col_name2'])

does not work from command line for the example provided.

Something is broken.

Regards
Nik

[ut_paule]

Hi all. I found that code completelly independent and very useful. I got it to work in my application even when I have to create grids in a windows builded by xml templates. But I am a little bit confused with grouping by date. I can't get it to work and in provided example there is the same problem - each date is a group even when dates are the same. How to fight that?
p.s. sorry for my english . i am ukrainian.

For some reason when doing the "not equal" check (!=) on the Date objects, it seems to fail, even if they are the same, as noted in the Firebug debug statements. The line in question is ...

if (lastvalues[j] != v) {

I'm not sure why javascript fails on this (help anyone?) as i assumed it would default to doing a toString() on the objects and then compare them. Because it did not i have explicitly used the toString() if we are comparing objects. With this following change the ECD grouping worked.

if ( (typeof(v)=="object" && (lastvalues[j].toString() != v.toString()) ) || (typeof(v)!="object" && (lastvalues[j] != v) ) ) {

I have a couple more tweaks I'm working on then I'll put out a new zip of the code. Meanwhile I'll attach the working screen shot...(I added sub-totaling in the groups for fun)

Enjoy

[mystix]

just a thought:
are the time values (down to the milliseconds) on both Date objects the same?

might need to run clearTime() on both if they're aren't.

[DamienValentine]

the date is stored in mysql database and corresponding field has a type of 'date' not 'datetime'. so i am completely sure that the time values in any case are equal to something like 00:00:00.

if ( (typeof(v)=="object" && (lastvalues[j].toString() != v.toString()) ) || (typeof(v)!="object" && (lastvalues[j] != v) ) ) {

Converting to string works perfect. Currently searching for formatting date in group caption:

groupTextTpl: '{text} : {gvalue} ({[values.rs.length]} {[values.rs.length == 1 ? "запис" : "записів"]})',

to a Y-m-d format. If anyone knows the answer - please post your code.

[ut_paule]

just a thought:
are the time values (down to the milliseconds) on both Date objects the same?

might need to run clearTime() on both if they're aren't.

If you look at the JSON they are being created from (orders.json)

ecd: 'Aug 6, 2008',

There should be no time on any of them. The JSON should get parsed consistently in all cases, and have the same time.

I added the following debug

if(v instanceof Date)
  console.debug(lastvalues[j].format("Y-m-d\\TH:i:s.uuu"), v.format("Y-m-d\\TH:i:s.uuu"));

And it gave this...

Row  2  added group. Values differ: prev= Wed Aug 06 2008 00:00:00 GMT-0700 (Pacific Daylight Time)  curr= Wed Aug 06 2008 00:00:00 GMT-0700 (Pacific Daylight Time)
2008-08-06T00:00:00.000000000 2008-08-06T00:00:00.000000000

So i'm ruling out a millisecond issue.

If i perform the operation lastvalue[j]-v i get the answer 0 when they are the same which again is what i would expect for Date objects, so why == or != doesn't work is still a mystery to me

[mystix]

just fyi, the u format specifier is a single "u", not a sequence of "u"s.

someDate.format("Y-m-d\\TH:i:s.u")

just tested, and standard js doesn't seem to allow Date comparisons using the == / === comparators.
you're better off using something like

date1.getElapsed(date2) == 0;

[ut_paule]

Hi

I just curios to know why the command like:

Ext.getCmp('ext-comp-1002').getStore().groupBy(['col_name1','col_name2'])

does not work from command line for the example provided.

Something is broken.

Regards
Nik

Looking at the code, it looks like the groupBy() can be used to just add one field to the list of grouping fields, so i expect to do what you want you should try

Ext.getCmp('ext-comp-1002').getStore().groupBy('col_name1');
Ext.getCmp('ext-comp-1002').getStore().groupBy('col_name2');

There is obviously room for improvement here. There is no simple method to set all the groups in one go, or to remove an individual group.

The way to do this directly is to modify the store.groupField and then invoke the datachanged event. Look at the following code which is used when a group is dragged off the toolbar and removed.

// Remove this group from the groupField array
var temp=[];
for(var i=this.panel.store.groupField.length-1;i>=0;i--) {
  if(this.panel.store.groupField[i]==fld) {
    this.panel.store.groupField.pop();
    break;
  }
  temp.push(this.panel.store.groupField[i]);
  this.panel.store.groupField.pop();
}

for(var i=temp.length-1;i>=0;i--) {
  this.panel.store.groupField.push(temp[i]);
}

if(this.panel.store.groupField.length==0)
  this.panel.store.groupField=false;

this.panel.store.fireEvent('datachanged', this);

I will try and add these convenience methods in the near future.

PaulE

[DamienValentine]

I have made a quick solution to the date formatting. Piece of my code:

if (v) {
				if (i == 0) {
					// First record always starts a new group
					if (typeof(v)=="object") {
						addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:Ext.util.Format.date(v,'Y-m-d')});
					} else {
						addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:v});
					}
					lastvalues[j] = v;
					gvalue.push(v);
					grpFieldNames.push(fieldName);
					grpFieldLabels.push(fieldLabel + ': ' + v);
					//gvalue.push(v);
				} else {
					if ((typeof(v)=="object" && (lastvalues[j].toString() != v.toString())) || (typeof(v)!="object" && (lastvalues[j] != v)) ) {
						// This record is not in same group as previous one
						console.debug("Row ",i," added group. Values differ: prev=",lastvalues[j]," curr=",v);
						if (typeof(v)=="object") {
							addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:Ext.util.Format.date(v,'Y-m-d')});
						} else {
							addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:v});
						}
						lastvalues[j] = v;
						//differ = 1;
						changed = 1;
						gvalue.push(v);
						grpFieldNames.push(fieldName);
						grpFieldLabels.push(fieldLabel + ': ' + v);
				} else {
					if (gfLen-1 == j && changed != 1) {
						// This row is in all the same groups to the previous group
						curGroup.rs.push(r);
						console.debug("Row ",i," added to current group ",glbl);
					} else if (changed == 1) {
						// This group has changed because an earlier group changed.
						if (typeof(v)=="object") {
							addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:Ext.util.Format.date(v,'Y-m-d')});
						} else {
							addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:v});
						}
						console.debug("Row ",i," added group. Higher level group change");
						gvalue.push(v);
						grpFieldNames.push(fieldName);
						grpFieldLabels.push(fieldLabel + ': ' + v);
					} else if(j<gfLen-1) {
						// This is a parent group, and this record is part of this parent so add it
						if(currGroups[fieldName])
							currGroups[fieldName].rs.push(r);
						else
							console.error("Missing on row ",i," current group for ",fieldName);
						}
					}
				}
			} else { 
				if (this.displayEmptyFields) {
					addGroup.push({idx:j,dataIndex:fieldName,header:fieldLabel,value:this.emptyGroupText||'(none)'});
					grpFieldNames.push(fieldName);
					grpFieldLabels.push(fieldLabel + ': ');
				}
			}

I wonder if anyone can make a more elegant solution with appropriate settings in configuration or something like this. Thanks for sharing, ut_paule!

[galdaka]

Hi,


Please attach your modifications in a file for upload to my site and all the people can test.

Lastest example: http://www.jadacosta.es/extjs/exampl...ultiGroup.html


Thanks in advance,