PDA

View Full Version : groupField on a day, not on minutes or seconds



davedriesmans
23 Dec 2011, 2:52 AM
how can i force a grid top group on a date field per day?

i simply have put groupField: 'agendaTimeFrom' in my store now but obviously i want overview per day and not per minutes or seconds as that doesn't makes sense. have no idea how to change that as i have to give up the field name there

mitchellsimoens
23 Dec 2011, 10:06 AM
You need to have your store be setup correctly. You should add an Ext.util.Grouper instance to the groupers property of the Store (groupers are a Ex.util.MixedCollection)

skirtle
23 Dec 2011, 11:33 AM
I think this is actually much more difficult than that. It's easy to add a grouper to the store but that only gets you half way there. The problem is getting it to work with the grouping feature of a grid.

In my opinion the key problem is that fields don't have a grouping equivalent of sortType. Clicking the 'Group By This Field' menu creates a grouper for you, it's quite complicated to customize it. Effectively it only lets you group data based on exact equality of the field values, you can't do anything slightly off-beat like rounding to the nearest day.

So far the closest I've come to making this 'work' is to disable the menu using enableGroupingMenu: false and then add an extra field with a convert function to round to the nearest day. This sort of works but it doesn't quite behave as I'd like when you try to sort on the date column.

I'd be interested to see if anyone can come up with something less horrendous.


Ext.create('Ext.grid.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
columns: [
{dataIndex: 'date', text: 'Date', flex: 1}
],
features: [
{ftype: 'grouping', enableGroupingMenu: false}
],
store: {
groupField: 'day',
data: [
{date: new Date().getTime()},
{date: new Date().getTime() + 1 * 6 * 60 * 60 * 1000},
{date: new Date().getTime() + 2 * 6 * 60 * 60 * 1000},
{date: new Date().getTime() + 3 * 6 * 60 * 60 * 1000},
{date: new Date().getTime() + 4 * 6 * 60 * 60 * 1000},
{date: new Date().getTime() + 5 * 6 * 60 * 60 * 1000},
{date: new Date().getTime() + 6 * 6 * 60 * 60 * 1000}
],
fields: [
'date',
{
mapping: 'date',
name: 'day',
convert: function(value) {
return Ext.Date.format(new Date(value), 'Y-m-d');
}
}
]
}
});

mitchellsimoens
23 Dec 2011, 11:36 AM
step by step :) First step, get that store grouped

skirtle
23 Dec 2011, 12:31 PM
I don't see how you'd do this just by adding a grouper to the store the way you suggest. You can specify a custom sorterFn on the grouper such that the data is sorted correctly but it still won't be grouped correctly.

Having fought with this for a couple of hours I think I've found a way to do it. I've overridden the getGroupString method on the store so that I can do custom groupings for a specific field. I still think it would be better if I could specify a groupType, a bit like a sortType, so that I don't have to resort to this hackiness.

Thoughts Mitchell? Am I missing a blindingly simple alternative?


Ext.create('Ext.grid.Panel', {
height: 300,
renderTo: Ext.getBody(),
width: 300,
columns: [
{dataIndex: 'date', text: 'Date', flex: 1},
{dataIndex: 'other', text: 'Other', flex: 1}
],
features: [
{ftype: 'grouping'}
],
store: {
fields: ['date', 'other'],
groupField: 'date',
data: [
{other: 'a', date: new Date().getTime()},
{other: 'a', date: new Date().getTime() + 1 * 6 * 60 * 60 * 1000},
{other: 'b', date: new Date().getTime() + 2 * 6 * 60 * 60 * 1000},
{other: 'a', date: new Date().getTime() + 3 * 6 * 60 * 60 * 1000},
{other: 'b', date: new Date().getTime() + 4 * 6 * 60 * 60 * 1000},
{other: 'a', date: new Date().getTime() + 5 * 6 * 60 * 60 * 1000},
{other: 'b', date: new Date().getTime() + 6 * 6 * 60 * 60 * 1000}
],
getGroupString: function(instance) {
var group = this.groupers.first();

if (group) {
if (group.property === 'date') {
return Ext.Date.format(new Date(instance.get('date')), 'Y m d');
}

return instance.get(group.property);
}

return '';
}
}
});

mitchellsimoens
23 Dec 2011, 12:52 PM
Come to think about it... that's how we did it in ST1 to do custom grouping is override getGroupString... in ST2 it's changing but I don't think Ext JS 4.1 it will be so getGroupString is the correct way.

davedriesmans
3 Jan 2012, 12:44 AM
thanks skirtle! worked perfect!