ExtJS 4.2.1 groupingsummary with drag drop not working

Question

I am using extjs 4.2.1. I have a grid with dragdrop plugin. I have added grouping summary feature. Drag drop stopped working after adding grouping feature (saying "Maximum call stack size exceeded ext-all-debug.js:16941").

I have tried on fiddle. Following code works with extjs 4.1.1 but not in 4.2.1.

Following is the code:

    Ext.define('TestResult', {
    extend: 'Ext.data.Model',
    fields: ['student', 'subject', {
        name: 'mark',
        type: 'int'
    }]
});

    Ext.create('Ext.grid.Panel', {
    width: 400,
    height: 440,
    renderTo: document.body,
    features: [{
        groupHeaderTpl: new Ext.XTemplate('<tpl for=".">', '<input type="button" value={name}></div>', '</tpl>'),
        ftype: 'groupingsummary'
    }],
    store: {
        model: 'TestResult',
        groupField: 'subject',
        data: [{
            student: 'Student 1',
            subject: 'Math',
            mark: 84
        }, {
            student: 'Student 1',
            subject: 'Science',
            mark: 72
        }, {
            student: 'Student 2',
            subject: 'Math',
            mark: 96
        }, {
            student: 'Student 2',
            subject: 'Science',
            mark: 68
        }]
    },

    columns: [{
        dataIndex: 'student',
        text: 'Name',
        summaryType: 'count',
        summaryRenderer: function(value) {
            return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
        }
    }, {
        dataIndex: 'mark',
        text: 'Mark',
        summaryType: 'sum'
    }],
    viewConfig: {
            plugins: {
                ptype: 'gridviewdragdrop'
            }
        },
    listeners: {
        afterrender: function(grid, eOpts) {
            // Getting summary here
            console.log('Sum >> ', grid.store.sum('mark', true));
        },
        groupclick: function(view, node, group, e, eOpts) {
            console.log('Clicked on ', group);
            if (e.getTarget().type === 'button'){
                alert('Clicked on '+ group);
            }
        }
    }
});

I run it with extjs 4.2.1 and can't see the problem: fiddle.sencha.com/#fiddle/6s1 — Shalev Shalit
Is it droping the node in the correct position? and not giving error at the console? strange!! — user3133994
Of course you can't drag between groups, because the sort is automatic. But you can enter the link and see for you self. — Shalev Shalit

Marin Vartan Marin Vartan · Accepted Answer · 2014-07-14T13:37:22

Try to add listeners in ViewConfig, and in this listener update column for grouping, some like this

    Ext.define('TestResult', {
extend: 'Ext.data.Model',
fields: ['student', 'subject', {
    name: 'mark',
    type: 'int'
}]
});

Ext.create('Ext.grid.Panel', {
width: 400,
height: 440,
renderTo: document.body,
features: [{
    groupHeaderTpl: new Ext.XTemplate('<tpl for=".">', '<input type="button" value={name}></div>', '</tpl>'),
    ftype: 'groupingsummary'
}],
store: {
    model: 'TestResult',
    groupField: 'subject',
    data: [{
        student: 'Student 1',
        subject: 'Math',
        mark: 84
    }, {
        student: 'Student 1',
        subject: 'Science',
        mark: 72
    }, {
        student: 'Student 2',
        subject: 'Math',
        mark: 96
    }, {
        student: 'Student 2',
        subject: 'Science',
        mark: 68
    }]
},

columns: [{
    dataIndex: 'student',
    text: 'Name',
    summaryType: 'count',
    summaryRenderer: function(value) {
        return Ext.String.format('{0} student{1}', value, value !== 1 ? 's' : '');
    }
}, {
    dataIndex: 'mark',
    text: 'Mark',
    summaryType: 'sum'
}],
viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop'
        },
        listeners: {
            beforedrop: function(node, data, overModel, dropPosition, dropHandlers) {

                var groupColumnDropV = overModel.get('subject');

                var thisRowModel = data.records[0];
                var groupColumnDragV = thisRowModel.get('subject');
                var student = thisRowModel.get('student');
                if ( groupColumnDropV != groupColumnDragV){
                        thisRowModel.set('subject', groupColumnDropV);
                }
                Ext.Ajax.request({
                        url: '/url_to_ajax/update_group_column',
                        params: {
                            student: student,
                            subject: groupColumnDropV
                        },
                        success: function(response){

                        }
                });
            }   
        }

},
listeners: {
    afterrender: function(grid, eOpts) {
        // Getting summary here
        console.log('Sum >> ', grid.store.sum('mark', true));
    },
    groupclick: function(view, node, group, e, eOpts) {
        console.log('Clicked on ', group);
        if (e.getTarget().type === 'button'){
            alert('Clicked on '+ group);
        }
    }
}
});

ExtJS 4.2.1 groupingsummary with drag drop not working

1 Answers