Question

I have a list reading from a Json store which contains a grouper on a field of type int. This field is called “req” in the sample model below. However, rather than group by the int value, I would like to assign a text value instead, so for example, in case of “1” I would group by “Yes” and in case of “0” I would group by “No”. The conversion can be hard coded as it will not change. Where do I make this conversion in my code? Thanks for your help

Ext.define('MyApp.store.MyStore', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.MyData'
    ],

    config: {
        model: 'MyApp.model.MyData',
        storeId: 'MyStore',
        proxy: {
            type: 'ajax',
            url: '/path/to/data.json',
            reader: {
                type: 'json',
                rootProperty: 'items'
            }
        },
        grouper: {
            property: 'req',
            sortProperty: 'req'
        },
        groupDir: 'DESC'
    }
});

Model:

Ext.define('Mypp.model.MyModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {
                name: 'example',
                type: 'string'
            },
        {
                name: 'req',
                type: 'int'
            }
        ]
    }
});

Answer 1

Add to the Model a calculated field with convert() function:

Ext.define('Mypp.model.MyModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {
                name: 'example',
                type: 'string'
            },
            {
                name: 'req',
                type: 'int'
            },
            {
                name: 'reqDisplay',
                type: 'string',
                convert: function (value, record) {
                    if (value == null) {
                         var req = record.get('req');
                         value = req ? 'Yes' : 'No'
                    }
                    return value;
                 }
            }
        ]
    }
});

… and use it instead

    grouper: {
        property: 'reqDisplay',
        sortProperty: 'reqDisplay'
    },

Cheers, Oleg