带有拖放功能的 ExtJS 4.2.1 分组摘要不起作用答案

【问题标题】：ExtJS 4.2.1 groupingsummary with drag drop not working带有拖放功能的 ExtJS 4.2.1 分组摘要不起作用
【发布时间】：2017-01-27 15:05:56
【问题描述】：

我正在使用 extjs 4.2.1。我有一个带有dragdrop 插件的网格。我添加了分组摘要功能。添加分组功能后拖放停止工作（说“最大调用堆栈大小超过 ext-all-debug.js:16941”）。

我试过小提琴。以下代码适用于extjs 4.1.1，但不适用于4.2.1。

以下是代码：

    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);
            }
        }
    }
});

【问题讨论】：

我用 extjs 4.2.1 运行，看不到问题：fiddle.sencha.com/#fiddle/6s1
是否将节点放置在正确的位置？并且不在控制台上给出错误？奇怪！！
当然不能在组之间拖动，因为排序是自动的。但是您可以输入链接并自己查看。

标签： extjs

【解决方案1】：

尝试在ViewConfig中添加监听，并在这个监听更新列进行分组，有的这样

    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);
        }
    }
}
});

【讨论】：