Javascript 不允许使用ExtJS将列拖动到特定位置

我的网格上有5列，我希望不允许用户将中间列右侧的列拖到左侧，也不允许将左侧的列拖到右侧

我的小提琴：

我有一个名为“禁止交叉区域”的列，如何禁止将

id

和

name

拖到

禁止交叉区域的右侧，以及如何在
禁止交叉区域的左侧禁用
组1
和
组2

如果需要，我可以向数据集中添加任何新的键：值对。
使用此代码，如果将
无交叉区域的列移到左侧，则该列将移到其右侧。反之亦然：

第一种解决方案：

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.grid.Panel', {
            columns: [
            {
                text: 'Id'

            },
            {
                text: 'Name'
            },
            {
                text: 'No Crossing Zone',
                draggable: false
            }, 
            {
                text: 'Group 1',
            }, 
            {
                text: 'Group 2',

            }],

            listeners:{
                columnmove: function (ct, column, fromIdx, toIdx, eOpts) {
                    var noCrossCol = undefined,
                        crossCol = undefined,
                        i = 0;
                    Ext.each(ct.getGridColumns(), function(col) { // There may be a better way to get "crossColIdx" and "crossCol"...
                        if(col.text == 'No Crossing Zone') {
                            crossColIdx = i;
                            crossCol = col;
                            return false;
                        }
                        i++;
                    });
                    console.log("fromIdx: " + fromIdx + "; toIdx: " + toIdx);
                    if((fromIdx <= crossColIdx) && (toIdx > crossColIdx)) {
                        console.log("moved too far");
                        ct.moveBefore(column, crossCol);
                    }
                    if((fromIdx >= crossColIdx) && (toIdx < crossColIdx)) {
                        console.log("moved too near");
                        ct.moveAfter(column, crossCol);
                    }
                }
            },

            renderTo: Ext.getBody()
        })
    }
});

Ext.application({
    name: 'Fiddle',

    launch: function() {
        Ext.create('Ext.grid.Panel', {
            columns: [{
                text: 'left part',
                sealed: true,
                columns: [{
                    text: 'Id'
                }, {
                    text: 'Name',
                    sealed: true,
                    columns: [{
                        text: 'Sub 1'
                    }, {
                        text: 'Sub 2'
                    }]
                }]
            }, {
                text: 'No Crossing Zone',
                draggable: false
            }, {
                text: 'right part',
                sealed: true,
                columns: [{
                    text: 'Group 1',
                    sealed: true,
                    columns: [{
                        text: 'Sub 1'
                    }, {
                        text: 'Sub 2'
                    }]
                }, {
                    text: 'Group 2',
                    sealed: true,
                    columns: [{
                        text: 'Sub 1'
                    }, {
                        text: 'Sub 2'
                    }]
                }]
            }],
            flex: 1,
            renderTo: Ext.getBody()
        })
    }
});

您甚至可以删除
禁止交叉区
列。

（根据评论中的要求进行编辑）
Hey@Michel FRANKE非常感谢您的帮助，我有一个重要的问题，是否可以使用添加了子标题的解决方案：。我仍然希望能够仅将拖动区域规则应用于ID、名称以及组1和组2。至于小组，他们不应该受到影响，因为他们将被封存。你能看看小提琴吗？你用的是ExtJS5还是ExtJS6？（你的第一把小提琴是V6，这一把是V5…我有点困惑）是的，我想为这两个部分制作一个超级标题，并将其密封。但是我真的很想避免它，有没有可能完全隐藏右半部分和左半部分的标题，这样它就不会显示了？使用CSS还是ExtJS？我尝试将右部分和左部分的“隐藏”设置为true，但它们也隐藏了所有子标题。。所以这不起作用，那么把它的高度设为0呢？