不允許使用ExtJS將列拖動到某些位置

Question

我的網格上有5列，我想禁止用戶能夠將中間列右側的列拖動到左側，同樣也禁止列上的列左拖到右邊。

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

我有一個叫無交叉地帶，我怎麼能禁止id和name從拖到No Crossing Zone的右側，並禁用Group 1和Group 2到No Crossing Zone左側列？

如果需要，我可以將任何新的鍵：值對添加到數據集。

Answer 1

使用此代碼，No Crossing Zone的列右側如果向左移動，它將向右移動。和反之亦然：

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

你甚至可以刪除No Crossing Zone列。