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

Question

这篇文章是我之前的文章（ 此处）的续篇，我（还）找不到可行的解决方案。 简而言之：我创建了一个 Extjs (4.X) 网格，其中包含父母和孩子的记录。 记录按排序顺序排列，其中子项总是出现在其父项下方，如此处所示，其中“P”将记录指定为父项，而“C”将记录指定为子项。

'May' 是 Peter 的父母，Odin 是 Thor 和 Loki 的父母，Bruce 还没有孩子被标记为父母（独立实体）

小提琴： https://fiddle.sencha.com/#view/editor&fiddle/3jks

我希望改变父母的排序顺序，同时在我向上/向下移动组时也带上他们的孩子。 起初我想尝试拖放，但找不到可行的解决方案（我尝试了 Gird DragAndDrop 以及 TreeGrid，fiddles 在我之前的帖子中）。

根据对上一篇开放帖子的建议，我尝试了将父母和孩子分组的分组，但我失去了拖放整个组的能力。 为了利用我所掌握的知识，我创建了按钮，用于根据用户点击向上或向下移动组。 分组基于排名列，因此一旦我更新排名，记录应该理想地跳组。 出于某种原因，当我点击 Rank:2 组中的“UP”按钮时，BRUCE 变为 Rank:1，May Parker 变为 Rank:2，这是正确的，但 Peter Parker 仍然停留在 Rank:1。 调试代码后，我发现商店出于某种原因删除了 Peter 的记录，并将其替换为 May Parker 的另一副本（尽管网格没有显示）。 我已将控制台消息放在我们可以观察到的地方。 这里可能是什么问题？ 非常感谢您的指点和建议。 如果有更好的方法根据排名移动这些记录，我也愿意改变整个逻辑。

Answer 1

这是 grid grouper header 拖放的工作小提琴。

以下是更多详细信息和一些有助于构建上下按钮示例的信息：

您正在多次更新记录。

我建议您按 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();
    }