javascript - 禁止使用 ExtJS 将列拖动到某些位置

Question

我的网格上有 5 列，我希望禁止用户能够将中间列右侧的列拖动到左侧，同样也不允许用户将左侧的列拖动到右侧。

我的 fiddle :https://fiddle.sencha.com/#fiddle/10ei

我有一个名为“禁止交叉区域”的列，如何禁止将 id 和 name 拖到禁止交叉区域的右侧>，并禁用禁止穿越区域左侧的组1和组2？

如果需要，我可以将任何新的键:值对添加到数据集中。

Answer 1

使用此代码，如果将禁止穿越区域向左移动，则其右侧的列将移回其右侧。反之亦然:

第一个解决方案:

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()
        })
    }
});

您甚至可以删除禁止穿越区域列。
(根据评论中的要求进行编辑)