View Full Version : Ext.dataview.List: Different functions for grouping string and grouping title

24 Jan 2012, 4:23 AM
Hi there.
I got a set of records with datestamp, and I want them grouped / sorted by date. Obviously, I don't want grouping string, like "2012-01-24 12:00", to be a header, I want something more fancy.

Is there any way to provide different string for grouping and for group title?

24 Jan 2012, 7:10 AM
It all runs off the grouper function in the store.

24 Jan 2012, 7:16 AM
If I'm getting you right, we have the same grouper function for both grouping string and group header, so there's no way to differentiate them?

Okay, thanks. Gotta try some tricks then.

31 Jan 2012, 6:58 AM
In [PR3] it was possible (getGroupString = group header), but in [PR4] it seems that the grouping string is now automatically added to the sorters.

My (sad) way :

grouper : {
groupFn: function(record) {
var MySort = ...;
return '<span style="display:none;">'+cMySort+'</span>' + record.get('cHeader');

1 Oct 2012, 12:55 PM
This was a problem for me as well when I migrated from ST1 to ST2.
I added this override, it seemed to be the least painful way to render something different into the header dom list item other than the grouped string that the store's grouper.groupFn returns.

The override checks to see if you have a config option call grpRenderer on the Ext.dataview.List which needs to be a function. Before the HTML code is passed to doAddHeader the grpRenderer gets called with these parameters: list, text, record, records

list = the Ext.dataview.List
text = the string returned by the groupFn (which is what is actually being grouped on)
record = the the first record in the current group
records = all the records in the current group

grpRenderer: function(list, text, record, records) {


Ext.override(Ext.dataview.List, {
findGroupHeaderIndices: function() {
if (!this.getGrouped()) {
return [];
var me = this,
store = me.getStore();
if (!store) {
return [];

var container = me.container,
groups = store.getGroups(),
groupLn = groups.length,
items = container.getViewItems(),
newHeaderItems = [],
footerClsShortCache = container.footerClsShortCache,
i, firstGroupedRecord, index, item, lastGroup;


if (items.length) {
for (i = 0; i < groupLn; i++) {
firstGroupedRecord = groups[i].children[0];
index = store.indexOf(firstGroupedRecord);
item = items[index];

// *** My Code Start ***
var grpText = store.getGroupString(firstGroupedRecord);
if(Ext.isDefined(me.getGrpRenderer)) {
var grpRenderer = me.getGrpRenderer();
if(grpRenderer) {
grpText = grpRenderer(me, grpText, firstGroupedRecord, groups[i].children);
container.doAddHeader(item, grpText);
// *** My Code End ***

// container.doAddHeader(item, store.getGroupString(firstGroupedRecord));
// Skip footer before the first Header
if (i) {
// Add footer before the last item
lastGroup = groups[--i].children;
Ext.fly(items[store.indexOf(lastGroup[lastGroup.length - 1])]).addCls(footerClsShortCache);

return newHeaderItems;