Question

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

我试过小提琴。以下代码适用于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);
            }
        }
    }
});

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

ExtJS 4.2.1分组，拖拽不起作用

1 个答案: