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

[dimitri.fedorov]

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?
Thanks.

[mitchellsimoens]

It all runs off the grouper function in the store.

[dimitri.fedorov]

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.

[Michou]

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');
    }
}

[ivanleblanc]

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;


        container.doRemoveHeaders();
        container.doRemoveFooterCls();


        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) {
                    Ext.fly(item.previousSibling).addCls(footerClsShortCache);
                }
                newHeaderItems.push(index);
            }
            // Add footer before the last item
            lastGroup = groups[--i].children;
            Ext.fly(items[store.indexOf(lastGroup[lastGroup.length - 1])]).addCls(footerClsShortCache);
        }


        return newHeaderItems;
    }
});