PDA

View Full Version : Grid Panel Grouping by formatted Date column



danielat
20 Jun 2013, 11:56 PM
Hello,

I have a grid panel with a grouping feature. I want my grid to be by default grouped by a date column. This column is in the format 'Y-m-d H:i:s', but I want my grouping to be limited to the format 'Y-m-d', so I would have the rows grouped without the timestamp, by day.
I managed to do so by using a custom grouper and overwritting it's getGroupString method, like this:


var grouper = Ext.create('Ext.util.Grouper', {
direction: 'DESC',
root:'data',
property:'initDate',
getGroupString: function(instance) {
return Ext.Date.format(instance.get('initDate'), 'Y-m-d');
}
});


This works fine and I have the grid display on render the data grouped correctly.
The problem is that if I group my grid by a different column, and afterwards group again by the 'initDate' column, my data is grouped by the whole date, including the timezone.

Do you have any suggestion about resolving this issue?

Thanks in advance,
Daniela.

slemmon
24 Jun 2013, 12:06 PM
The header menu's group by handler is pretty straight-forward - just groups by the dataIndex of the column.
I suspect you'll need to either:
listen to the groupchange event (there is not a beforegroupchange event) and clear / set your own grouper
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.data.Store-event-groupchange

or you can extend the grouping feature and override the behavior of onGroupMenuItemClick. That is a private method and as always, changing / extending private class members means you're taking on the ownership of maintenance as new frameworks come out as they may or may not change private class internals without notice (standard disclaimer).

danielat
24 Jun 2013, 10:30 PM
Thanks for your reply. I have tried the first approach you've mentioned and listened to the groupchange event. The problem is I don/t know how to set my gruoup to the value I want. I've tried overridding the getgroupstring function to return the date in the right format. Although this approach works, and the grid has the rows grouped by the formatted date, I have problems with the grid afterwards. Somehow the store doesn't have the records grouped by the formatted date values, but by the unformatted date values.
This is my code in the listener:


this.store.on('groupchange', function(store, groupers, eOpts) {
if(groupers) {
if (groupers.items[0]) {
console.dir(store);
if (groupers.items[0].property == 'initDate'){
groupers.items[0].getGroupString = function(instance) {
return Ext.Date.format(instance.get('initDate'),'Y-m-d');
};
}
}
}
});


Do you have a different suggestion for doing this?
Thanks,
Daniela.

slemmon
25 Jun 2013, 3:45 PM
I haven't tried it, but was thinking in the groupchange event you could do:


// or whatever grouper you wanted to set up
var grouper = Ext.create('Ext.util.Grouper', {
direction: 'DESC',
root: 'data',
property: 'initDate',
getGroupString: function (instance) {
return Ext.Date.format(instance.get('initDate'), 'Y-m-d');
}
});
store.clearGrouping();
store.group(grouper);

danielat
25 Jun 2013, 10:19 PM
This doesn't work. Calling store.group() in the groupchange event makes the groupchange event being called in an infinite loop.
Thanks.

slemmon
26 Jun 2013, 3:18 PM
Maybe a timer of some sort?



// or whatever grouper you wanted to set up
if (store.regroup === true) {
var grouper = Ext.create('Ext.util.Grouper', {
direction: 'DESC',
root: 'data',
property: 'initDate',
getGroupString: function (instance) {
return Ext.Date.format(instance.get('initDate'), 'Y-m-d');
}
});
store.regroup = true;
store.clearGrouping();
store.group(grouper);
Ext.defer(function () {
delete store.regroup
}, 500);
}