PDA

View Full Version : Custom List Group Headers (Calendar Events ex)



iamcam
4 Nov 2010, 3:23 PM
I think this is pretty useful in some circumstances: Changing the group string displayed in lists. I don't mean using the out-of-the-box functionality. What I'm talking about is displaying something entirely different than what the list items are grouped by.

Why?
I spent some time trying to figure out how to group calendar events by month/year without actually having to show the numeric values for either. So instead of having to list something like 201011 / 201012 / 201101 / 201102

calStore = new Ext.data.Store({
model: 'Event',
sorters: ['year','month', 'day'],
getGroupString : function(record) {
return record.get('year').toString() + record.get('month').toString();
}
...
});

After thinking about this thread (http://www.sencha.com/forum/showthread.php?106723-DISCUSS-Using-HTML-in-group-headers-(Ext.List).&highlight=list), I ended up figuring out that you can do this:



//Assuming your JSON has at least three integer date fields: year, month, and day
calStore = new Ext.data.Store({
model: 'Event',
sorters: ['year','month', 'day'],
getGroupString : function(record) {
return "<span style='display:none'>"+record.get('year').toString() + record.get('month').toString() + "</span>"+ fooBar ; //this can be anything, really. I use it to spit out a nicely formatted date: November
}
...
});

It's still grouping by year+month, but those values are hidden by otherwise identical markup.

I know this is pretty basic and it's not a full demo, but I think it should be enough to get you started