ExtJS - Les lignes EditorGridPanel ne peuvent pas être déplacées?

Question

J'avais une configuration de glisser-déposer qui fonctionnait, mais une fois que j'ai changé l'une des grilles en un EditorGridPanel, je ne pouvais plus la faire glisser - seulement vers elle. Une fois que je clique sur la ligne que je veux faire glisser je reçois l'erreur suivante:

sm.isSelected is not a function 
if(!sm.isSelected(rowIndex) || e.hasModifier()){ 

ext-all-debug.js (line 45439) 

Est-il possible de le configurer je peux faire glisser les lignes d'un EditorGridPanel?

Answer 1

J'ai trouvé la réponse par inadvertance en regardant un autre exemple.

Lors de la création d'un EditorGridPanel, assurez-vous d'inclure:

selModel:new Ext.grid.RowSelectionModel({singleSelect:true}), 

pour obtenir la fonctionnalité glisser-déposer pour travailler.

Answer 2

Vous n'avez pas besoin d'utiliser RowSelectionModel, mais vous devrez écrire votre propre code pour les zones de glisser-déposer. Voici un exemple de la façon d'utiliser le glisser-déposer avec CellSelectionModel:

grid1.on('render', function(grid) {grid1.initializeDragZone (grid1); }); grid2.on('render', function(grid) {grid2.initializeDropZone (grid2); });

initializeDragZone : function(grid) { 
    grid.dragZone = new Ext.dd.DragZone(grid.getEl(), { 
     getRepairXY: function() { 
      return this.dragData.repairXY; 
     }, 

     getDragData: function(e) { 
      var cell = grid.getSelectionModel().getSelectedCell(); 
      var row = grid.getStore().getAt(cell[0]); 
      var data = row.get('id');  //you can put custom data here 
      var sourceEl = grid.getView().getRow(cell[0]); 

      if (sourceEl) { 
       var d = sourceEl.cloneNode(true); 
       d.id = Ext.id(); 
       return grid.dragData = { 
        sourceEl: sourceEl, 
        repairXY: Ext.fly(sourceEl).getXY(), 
        ddel: d, 
        customData: data //our custom data 
       }; 
      } 
     } 
    }); 
} 

initializeDropZone : function(grid) { 
    grid.dropZone = new Ext.dd.DropZone(grid.getView().scroller, { 
     getTargetFromEvent: function(e) { //supports multiple drop zone classes 
      var target = e.getTarget('.some-class1'); 
      target = target? target: e.getTarget('.some-class2'); 
      target = target? target: e.getTarget('.some-class3'); 
      target = target? target: e.getTarget('.some-class4'); 
      return target; 
     }, 

     onNodeEnter : function(target, dd, e, data){ 
      Ext.fly(target).addClass('drop-zone-selected'); //test 
     }, 

     onNodeOut : function(target, dd, e, data){ 
      Ext.fly(target).removeClass('drop-zone-selected'); //test 
     }, 

     onNodeOver : function(target, dd, e, data){ 
      return Ext.dd.DropZone.prototype.dropAllowed; 
     }, 

     onNodeDrop : function(target, dd, e, data){ 
      var rowIndex = grid.getView().findRowIndex(target); 
      var rowRecord = grid.getStore().getAt(rowIndex); 
      var customData = data.customData; 

      //use custom data 

      return true; 
     } 
    }); 
}