EXTJS Grid grouping by Object error

Question

I am trying to implement a grid with grouping feature. This is my Model:

Model

Ext.define('myApp.model.ModelPrueba2', {
extend: 'Ext.data.Model',
fields: ['id', {
    name: 'name',
    type: 'string'
},'sign']
});

I fill my store from an AJAX proxy request. This is my JSON:

{
success: true,
data: [{
        id: 1,
        name: 'Name 1',
        sign: {
            id: 1,
            name: 'F1'
        }
    }, {
        id: 2,
        name: 'Name 2',
        sign: {
            id: 2,
            name: 'F2'
        }
    }]
}

You can appreciate that my 'sign' field is an 'object'. My problem is: when I group by 'name', it works fine, and if I collapse some group, it only collapses the group that I selected. However, if I group by 'sign', the groups are well-formed and displayed, but when I collapse a specific group, all the groups get collapsed, and the only difference with the previous test is the field type, 'name' is string and 'sign' is an object... So I don't really know if this a bug. I am using 4.2 version.

This is a fiddle where you can test my problem: https://fiddle.sencha.com/#fiddle/vt

Here you can group by 'probabilities to win', and collapse one group, it works fine, but if you delete every

toString: function() {
    return this.value;
}

from the 'data' array and do the same, you will see how all groups get collapsed in one. What can I do to fix this?, I don't like to use this toString() in my store or JSON.
How can I group by an Object attribute?

Christophe Le Besnerais Christophe Le Besnerais · Accepted Answer · 2015-10-09T12:56:34

you MAY have some luck with a "hasOne" relationship in your model instead of the "auto' type. (I'm not sure if it's possible to group using a relationship)

Or you could create another field just for the grouping (type string or int) like this :

    {
    success: true,
    data: [{
            id: 1,
            name: 'Name 1',
            myGroupField : 1,
            sign: {
                id: 1,
                name: 'F1'
            }
        }, {
            id: 2,
            name: 'Name 2',
            myGroupField : 2,
            sign: {
                id: 2,
                name: 'F2'
            }
        }]
    }

A similar solution is to bring up the field from your nested object to the parent object :

{
success: true,
data: [{
        id: 1,
        name: 'Name 1',
        signId: 1,
        signName: 'F1'
    }, {
        id: 2,
        name: 'Name 2',
        signId: 2,
        signName: 'F2'
    }]
}

and then group by signId

EXTJS Grid grouping by Object error

1 Answers