在 EditorGridPanel 中上下移动行

Posted 2023-02-26

【中文标题】在 EditorGridPanel 中上下移动行

【英文标题】：Moving rows up and down in an EditorGridPanel

【发布时间】：2012-06-12 14:50:01

【问题描述】：

有没有人知道/知道在 EditorGridPanel 中移动行的工作示例（或知道为什么它对我不起作用）？ 我发现了几个例子，我发现的例子使用了这种方法：

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

在我的情况下，这失败了。它在网格中看起来不错，但实际上有 2 个 DELETE http 请求被发送到服务器，并且没有 PUT。当我重新加载页面时，这一点变得很明显 - 移动的行实际上已被删除。

他是我商店的基本配置：

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

【参考方案1】：

在实现 DnD 重新排序视图时，我遇到了类似的问题。问题是商店将每条 remove()d 记录标记为删除，即使您重新插入它也是如此。

阅读Ext.data.Store的remove()方法的源码，找到了解决办法：

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

看到了吗？我们可以传递第二个布尔参数来告诉商店我们只是在移动记录！但是被标记为私有且未记录，我们在升级到新版本的框架时应该小心。

所以最终的解决方案是：

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

ExtJS 版本：4.1