Question

Does anyone have/know of a working example of a moving rows within an EditorGridPanel (or know why it’s not working for me)?
I’ve found few examples, and the ones I’ve found use this approach:

// calculate the new index, then remove the record from the store, and re-insert it at the new index
grid.getStore().remove(record);
grid.getStore().insert(index, record);

In my case this fails. It looks good in the grid, but 2 DELETE http requests actually get sent to the server, and no PUT. This becomes evident when I reload the page – the moved row has actually been deleted.

He’re the basic config of my store:

var remoteJsonStore = new Ext.data.JsonStore({
            storeId: 'colStore',
            autoDestroy: false,
            autoSave: true,
            proxy: new Ext.data.HttpProxy({url:'/exercises/collect/data_rows'}),
            restful: true,
            format: 'json',
            disableCaching: false,
            autoLoad: true,
            writer: new Ext.data.JsonWriter({
              encode: false
            }),
            root: 'data',
            idProperty: 'data_row_id',
            fields: recordFields,
            baseParams:{section_id:GridUtils.properties[gridId]['section_id']},
            listeners:{
              exception:function(misc){
                 // stuff....
              },
              beforewrite:function(store, action, rs, options, arg){
                this.baseParams["position"]=rs.rowIndex;
              },
              beforesave:function(store, data){
                 // stuff....                }
              }
            }
});

Answer 1

I had a similar problem when implementing a DnD reordering view. The problem is that the store marks every remove()d record for delete, even if you re-insert it.

Reading the source of Ext.data.Store’s remove() method, I found a solution:

remove: function(records, /* private */ isMove) {

See? We can pass a second boolean agument to tell the store we are just moving the record! But being marked as private and not documented, we should take care when upgrading to a new version of the framework.

So the final solution is:

grid.getStore().remove(record, true); // just moving
grid.getStore().insert(index, record);

ExtJS version: 4.1