Extjs 4.x用按钮向上/向下移动网格记录

Question

这篇文章是我较早的帖子的延续（在这里）我找不到工作解决方案（尚未）。简而言之： 我创建了一个Extjs（4.x）网格，该网格具有父母和孩子的记录。记录按顺序排序，在儿童中总是出现在父母下方，如下所示，“ p”将记录指定为父母，而“ c”将记录指定为儿童的记录。

“梅”是彼得的父母，奥丁是雷神和洛基的父母，布鲁斯还没有孩子被标记为父母（独立实体）

fiddle： https://fiddle.sencha.com/#view/#view/editor＆eeditor＆amp.fiddle/3jks

我希望更改排序的顺序当我上升/下降时，父母还带着孩子。起初，我想尝试拖放，但找不到一个工作解决方案（我尝试了Gird DragandDrop以及TreeGrid，Fiddles在我以前的 post ）。

根据上一篇公开帖子的建议，我尝试对哪些小组和孩子进行分组，但我失去了拖放整个小组的能力。为了使用我创建的知识，我可以根据用户单击来向上或向下移动组。该分组基于等级列，因此，一旦我更新等级，记录应该理想地跳跃组。由于某种原因，当我在排名上单击“向上”按钮时：2组，布鲁斯更改为排名：1，梅·帕克（May Parker）更改为排名：2是正确的，但彼得·帕克（Peter Parker）仍然保持在等级：1。在调试代码之后，我发现商店出于某种原因将彼得的记录删除，并用另一份May Parker替换了（尽管网格没有显示）。我输入了控制台消息，我们可以观察到这一点。这里有什么问题？非常感谢指针和建议。如果有更好的方法可以根据等级移动这些记录，我也可以更改整个逻辑。

Answer 1

这是一个工作 fiddle 用于GRID GROUPER drag-Drop。

以下是更多详细信息，有助于建立您的上下按钮示例：

您正在多次更新记录。

我建议您通过RecordID设置排名，以确保仅处理一次每个项目。否则，在您处理它们时，记录切换组。

    // I am using onBeforeGroupClick to handle collapsing correctly
    onBeforeGridGroupClick: function (grid, node, dataIndex, e, eOpts) {
        const targetIsButton = e.getTarget().type === 'button';

        console.log('[onBeforeGridGroupClick] targetIsButton', targetIsButton);

        if (targetIsButton) {
            this.updateRank(grid, node, dataIndex, e)
        }

        // return false will stop gridgroupclick from running
        return !targetIsButton;
    },

    // here I am updating the rank
    updateRank: function (grid, node, group, e) {
        console.log('[updateRank] dataIndex', group);

        const store = grid.getStore();

        // collect the group data for the clicked group
        const groups = store.getGroups(),
            currentGroupIndex = groups.findIndex('rank', group),
            currentGroup = groups.items[currentGroupIndex],
            // Ext.pluck gets the IDs from the current group
            currentRecordIds = Ext.pluck(currentGroup.items, 'id');

        // collecting the group data for the group you want to switch with
        const isUp = e.getTarget().value === 'Up';
            targetId = currentGroupIndex + (isUp ? 1 : -1)
            targetGroupIndex = groups.findIndex('rank', targetId),
            targetGroup = groups.items[targetGroupIndex],
            targetRecordIds = Ext.pluck(targetGroup.items, 'id');

        // define out of range conditions
        if(targetGroupIndex < 0) return;

        // stop the grid from updating while you work on the store
        store.suspendEvents(true);

        // set the rank for the target and current records
        Ext.Array.each(targetRecordIds, function(id) {
            const record = store.findRecord('id', id);
            
            record.set('rank', currentGroupIndex);
        })
        Ext.Array.each(currentRecordIds, function(id) {
            const record = store.findRecord('id', id);
            
            record.set('rank', targetGroupIndex);
        })

        // update the grid from all suspended store events
        store.resumeEvents();
    }