extjsdrag-and-dropextjs4extjs6extjs-grid

What has changed in gridviewdragdrop between ExtJs 4.2 and ExtJs 6.2

I'm upgrading from ExtJs 4.2 to ExtJs 6.2, and something has changed in between in how drag and drop works.

In ExtJs 4.2, I had a simple use of it in a grid:

Ext.define('App.view.images.List', {
    extend: 'Ext.grid.Panel',
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            containerScroll: true
        },
        enableTextSelection : true
    },

There's a detail that may be important: the store is ordered:

Ext.define('App.store.images.Images', {
    extend: 'Ext.data.Store',
    sorters: [{
        property: 'position'
    }],

With ExtJs 4.2, I needed not to do anything on the drop event in order to change the order of the records. A simple drag and drop changed the order of the lines. I updated the position fields in the store afterwards.

With ExtJs 6.2, the drag and drop does not change the order of the lines. It only fires the drag event, and it seems it is up to the code in the event handler to change the order of the records in the table and the lines in the grid.

Is there a bug somewhere, or is this a change in drag and drop functionality between ExtJs 4 and 6 ?

Solution

  • I looks as if in ExtJs 6, the sorter configuration takes precedence over drag and drop. It is therefore no longer possible to reorder a grid with a sorter using drag and drop only.

    When trying to reorder a sorted grid, the drop event is fired and receives the expected data, but the grid is not reordered. We must change the property the store is sorted on in the drop-handler. The view will then update according to the new data.

    In other words: