How to group grid panel by custom renderer column?

[ornanong_o]

How can I group grid panel by renderer column?

I have column which its value is object and I render it in to HTML tag such <a>aa</a>.
When I group by this field, it will group by [Object Object].

group.png

The ExtJS3 group column by renderer value but the ExtJS4 changes it to Object type. How can I group column by renderer value?

[ornanong_o]

Following picture is screen shot when group by Cuisine that is object value (not string):

Grouped Grid Example - Mozilla Firefox_2011-09-20_11-22-52 -2.PNG

Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.onReady(function() {
    // wrapped in closure to prevent global vars.
    Ext.define('Restaurant', {
        extend: 'Ext.data.Model',
        fields: ['name', 'cuisine']
    });
    
    var aa ={
    id: '1',
    name: 'aa'
    };var bb ={
    id: '2',
    name: 'bb'
    };var cc ={
    id: '3',
    name: 'cc'
    };var dd ={
    id: '4',
    name: 'dd'
    };

    var Restaurants = Ext.create('Ext.data.Store', {
        storeId: 'restaraunts',
        model: 'Restaurant',
        sorters: ['cuisine','name'],
        groupField: 'cuisine',
        data: [{
            name: 'Cheesecake Factory',
            cuisine: [aa]
        },{
            name: 'University Cafe',
            cuisine: [bb]
        },{
            name: 'University Cafe',
            cuisine: [cc, dd]
        }]
    });
    
    var groupingFeature = Ext.create('Ext.grid.feature.Grouping',{
        groupHeaderTpl: 'Cuisine: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
    });

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        collapsible: true,
        iconCls: 'icon-grid',
        frame: true,
        store: Restaurants,
        width: 600,
        height: 400,
        title: 'Restaurants',
        features: [groupingFeature],
        columns: [{
            text: 'Name',
            flex: 1,
            dataIndex: 'name'
        },{
            text: 'Cuisine',
            flex: 1,
            dataIndex: 'cuisine',
            renderer:function(value) {
            var renderedText = "";
            for(var i = 0; i< value.length; i++)
            {    
                renderedText = renderedText + value[i].name + '<br/>';
            }             
            return renderedText;
            }
        }],
        fbar  : ['->', {
            text:'Clear Grouping',
            iconCls: 'icon-clear-group',
            handler : function(){
                groupingFeature.disable();
            }
        }]
    });
});

But expected result should be displayed as following picture (Implement with ExtJs 3):
Grid3 Grouping Example - Mozilla Firefox_2011-09-20_11-39-09.jpg


Can anyone help me?

Thank in advance.

[HTK]

Try to override the getGroupString function of your store. Add something like this:

getGroupString: function(instance) {
        return instance.get('....').property;
    }

Something like that should work

[ornanong_o]

Thank you for your help
It's work.

[HTK]

Did it work because this thread is still unanswered!?