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

Disallow column dragging to certain positions with ExtJS

本文关键字：定位 位置 拖动 ExtJS 不允许      更新时间：2023-09-26

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

我的小提琴：https://fiddle.sencha.com/#fiddle/10ei

我有一个名为No Crossing Zone的列，如何禁止将id和name拖到No Crossing Zone的右侧，并禁用Group 1和Group 2拖到No Crossing Zone的左侧？

如果需要，我可以向数据集添加任何新的键：值对。

使用此代码，如果No Crossing Zone的列向左移动，它的列右将向后移动。反之亦然：

第一个解决方案：

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

您甚至可以删除No Crossing Zone列
（在评论中请求后编辑）

相关文章：