In Ext.js 4, sort or group by a rendered value in a grid. Groupers/Sorters are store functions, renderers are grid functions, so this data typically lives in incompatible places. What we do is establish a rendered_ shadow copy of the data the renderer works with, render the shadow, and persist render output IN the renderer, so sorting and groupi…

group_or_sort_by_custom_renderer.js

// model
Ext.define("Person", {
   extend: "Ext.data.Model",
   fields: ["name", "parents", "renderered_parents"]
});

// store
var Family = Ext.create("Ext.data.Store", {
   model: "Person",
   data: [
      {
         name: "Rusty",
         parents: [{name: "Ellen", sex: "F"}, {name: "Clark", sex: "M"}]
      }
   ]
});

// grid
Ext.create('Ext.grid.Panel', {
   title: 'Vacation',
   store: Family,
   features: [{ ftype:'grouping' }],
   columns: [
      {
         text: 'Name',
         dataIndex: 'name'
      },
      {
         text: 'Parents',
         dataIndex: 'rendered_parents', // use rendered_parents instead of parents
         flex: 1,
         renderer: function(rendered, meta, record) {
            var value = record.get("parents"); // grab the value we really care about
            var rendered = value.map(function(p) {
               var out = p.sex == "M"? "Father": "Mother";
               out += ": " + p.name;
               return out;
            }).join(", ");
            // can't use record.set()- set triggers another invocation of render which leads to an error
            record.data.rendered_parents = rendered; // cache the rendered output to this column's dataIndex
            return rendered; // return it like any renderer
         }
      }
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

could you create a fiddle of this?