Grid grouping and sorting in ExtJS 4.2.1

Question

I try to implement grid with grouping similar to this example: http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/groupgrid.html Here data is grouped by column "Cuisine" and sorting by this column sort groups accordingly. When I paste code of this example into a project, which uses 4.2.1, or in code editor at ExtJS 4.2.1 docs site, the view is exactly the same, sorting works for column "Name", but it doesn't work by column "Cuisine". Did they remove sorting by grouping column in 4.2.1? If not, how to make it work?

Answer 1

The same example is present in 4.2.1 SDK, and indeed sorting by the grouped column doesn't work anymore. Sounds like a regression to me, you should notify Sencha.

Edit:

That's the code of the method Ext.data.Store#sort that has changed. Restoring the previous version fixes the behaviors (see my comments to find the modified lines):

Ext.define(null, {
    override: 'Ext.data.Store'

    ,sort: function(sorters, direction, where, doSort) {
        var me = this,
            sorter,
            newSorters;

        if (Ext.isArray(sorters)) {
            doSort = where;
            where = direction;
            newSorters = sorters;
        }
        else if (Ext.isObject(sorters)) {
            doSort = where;
            where = direction;
            newSorters = [sorters];
        }
        else if (Ext.isString(sorters)) {
            sorter = me.sorters.get(sorters);

            if (!sorter) {
                sorter = {
                    property : sorters,
                    direction: direction
                };
                newSorters = [sorter];
            }
            else if (direction === undefined) {
                sorter.toggle();
            }
            else {
                sorter.setDirection(direction);
            }
        }

        if (newSorters && newSorters.length) {
            newSorters = me.decodeSorters(newSorters);
            if (Ext.isString(where)) {
                if (where === 'prepend') {
                    // <code from 4.2.1>
                    // me.sorters.insert(0, newSorters);
                    // </code from 4.2.1>

                    // <code from 4.2.0>
                    sorters = me.sorters.clone().items;

                    me.sorters.clear();
                    me.sorters.addAll(newSorters);
                    me.sorters.addAll(sorters);
                    // </code from 4.2.0>
                }
                else {
                    me.sorters.addAll(newSorters);
                }
            }
            else {
                me.sorters.clear();
                me.sorters.addAll(newSorters);
            }
        }

        if (doSort !== false) {
            me.fireEvent('beforesort', me, newSorters);
            me.onBeforeSort(newSorters);

            sorters = me.sorters.items;
            if (sorters.length) {

                me.doSort(me.generateComparator());
            }
        }
    }
});

Answer 2

set sortable: true either on a defaults config for the grouping column or as a config on the child columns themselves. e.g.

{
            // NOTE: these two are grouped columns
            text: 'Close',
            columns: [{
                text: 'Value',
                minWidth: 100,
                flex: 100,
                sortable: true,
                dataIndex: 'ValueHeld_End'
            }, {
                text: 'Total',
                minWidth: 110,
                flex: 110,
                sortable: true,
                dataIndex: 'TotalPnL'
            }]
        }