Results 1 to 2 of 2

Thread: How can I make the Grid Grouping Feature use my column renderer?

  1. #1
    Sencha Premium Member
    Join Date
    Aug 2012

    Question How can I make the Grid Grouping Feature use my column renderer?

    I'm bound to a field of type "auto" - an object something like:
    asset: {
        name: 'asset name',
        type: 'SERVER',
        ... other state information
    My renderer:
        renderAsset: function (asset) {
            var objectNameAndIcon = '<img src="' + common.getAssetIconSrc(asset)
                + '" class="assetIcon" />' + Ext.util.Format.htmlEncode(;
            return '<a name="navigateToEntity" href="javascript:;">' + objectNameAndIcon + '</a>';
    I want the grouping to USE my renderer. But even if I go out of my way to try to set up my groupHeaderTpl correctly, it still won't work:
            var me = this;
            this.features = [Ext.create('Ext.grid.feature.Grouping', {
                id: 'groupingFeature',
                startCollapsed: true,
                groupHeaderTpl: Ext.create('Ext.XTemplate',
                    '<tpl switch="groupField">',
                        '<tpl case="asset">',
                        '<tpl default>',
                        complile: true,
                        formatAsset: Ext.Function.bind(me.renderAsset, me)
    The problem is that the value passed to the format function is "[Object] object" rather than the native value of the row! YUCK

    I would even be happy if the Column had a method I could override such as the getSortParam. If I could at least specify the same kind of thing for a "getGroupParam" that would be a reasonable workaround.

    I've even tried to mitigate this by providing a grouper for the store:

   = new{
                grouper: {
                    _property: 'asset',
                    groupFn: function(item) {
                        var root = this._root;
                        if (this._property === 'asset') {
                            return (root ? item[root] : item)[this._property].name;
                        } else {
                            return (root ? item[root] : item)[this._property];
    This works fine as long as I don't ever choose to uncheck "Show in groups" or group by any other field! Once you do that the grouper function is blown away. GRRR! How do I make the groupFn STICKY?
    Last edited by jkyoutsey; 12 Feb 2015 at 1:29 PM. Reason: More details

  2. #2
    Sencha Premium Member
    Join Date
    Apr 2013


    Hello, Just configure your grouping feature using the good grouprHeaderTpl wish something like this : features: [{ ftype: 'grouping', groupHeaderTpl: '{renderedGroupValue} ({children.length})' } That's work for me in 5.1.2 Have a nice day

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts