extjs表格行拖动插件

Ext.ux.GridDragDropRowOrder = Ext.extend(Ext.util.Observable, {
  copy : false,

  scrollable : false,

  constructor : function(config) {
    if (config)
      Ext.apply(this, config);

    this.addEvents({
          beforerowmove : true,
          afterrowmove : true,
          beforerowcopy : true,
          afterrowcopy : true
        });

    Ext.ux.GridDragDropRowOrder.superclass.constructor.call(this);
  },

  init : function(grid) {
    this.grid = grid;
    grid.enableDragDrop = true;

    grid.on({
          render : {
            fn : this.onGridRender,
            scope : this,
            single : true
          }
        });
  },

  onGridRender : function(grid) {
    var self = this;

    this.target = new Ext.dd.DropTarget(grid.getEl(), {
      ddGroup : grid.ddGroup || 'GridDD',
      grid : grid,
      gridDropTarget : this,

      notifyDrop : function(dd, e, data) {
        if (this.currentRowEl) {
          this.currentRowEl.removeClass('grid-row-insert-below');
          this.currentRowEl.removeClass('grid-row-insert-above');
        }
                
        var t = Ext.lib.Event.getTarget(e);
        var rindex = this.grid.getView().findRowIndex(t);
        
        if (rindex === false || rindex == data.rowIndex) {
          return false;
        }
        if (this.gridDropTarget.fireEvent(self.copy
                ? 'beforerowcopy'
                : 'beforerowmove', this.gridDropTarget,
            data.rowIndex, rindex, data.selections, 123) === false) {
          return false;
        }

        var ds = this.grid.getStore();

        var selections = new Array();
        var keys = ds.data.keys;
        for (var key in keys) {
          for (var i = 0; i < data.selections.length; i++) {
            if (keys[key] == data.selections[i].id) {
              if (rindex == key) {
                return false;
              }
              selections.push(data.selections[i]);
            }
          }
        }
        var targetRecord = this.grid.store.getAt(rindex);
        
        if (rindex > data.rowIndex && this.rowPosition < 0) {
          rindex--;
        }
        if (rindex < data.rowIndex && this.rowPosition > 0) {
          rindex++;
        }

        if (rindex > data.rowIndex && data.selections.length > 1) {
          rindex = rindex - (data.selections.length - 1);
        }

        if (rindex == data.rowIndex) {
          return false;
        }
        if (!self.copy) {
          for (var i = 0; i < data.selections.length; i++) {
            ds.remove(ds.getById(data.selections[i].id));
          }
        }

        for (var i = selections.length - 1; i >= 0; i--) {
          var insertIndex = rindex;
          ds.insert(insertIndex, selections[i]);
        }
        var sm = this.grid.getSelectionModel();
        if (sm) {
          sm.selectRecords(data.selections);
        }
        this.gridDropTarget.fireEvent(self.copy
                ? 'afterrowcopy'
                : 'afterrowmove', this.gridDropTarget,
            data.rowIndex, rindex, data.selections,this.grid.store);
        return true;
      },

      notifyOver : function(dd, e, data) {
        var t = Ext.lib.Event.getTarget(e);
        var rindex = this.grid.getView().findRowIndex(t);
        var ds = this.grid.getStore();
        var keys = ds.data.keys;
        for (var key in keys) {
          for (var i = 0; i < data.selections.length; i++) {
            if (keys[key] == data.selections[i].id) {
              if (rindex == key) {
                if (this.currentRowEl) {
                  this.currentRowEl
                      .removeClass('grid-row-insert-below');
                  this.currentRowEl
                      .removeClass('grid-row-insert-above');
                }
                return this.dropNotAllowed;
              }
            }
          }
        }
        if (rindex < 0 || rindex === false) {
          if(this.currentRowEl)
          this.currentRowEl.removeClass('grid-row-insert-above');
          return this.dropNotAllowed;
        }

        try {
          var currentRow = this.grid.getView().getRow(rindex);
          var resolvedRow = new Ext.Element(currentRow).getY()
              - this.grid.getView().scroller.dom.scrollTop;
          var rowHeight = currentRow.offsetHeight;
          this.rowPosition = e.getPageY() - resolvedRow
              - (rowHeight / 2);

          if (this.currentRowEl) {
            this.currentRowEl.removeClass('grid-row-insert-below');
            this.currentRowEl.removeClass('grid-row-insert-above');
          }

          if (this.rowPosition > 0) {
            this.currentRowEl = new Ext.Element(currentRow);
            this.currentRowEl.addClass('grid-row-insert-below');
          } else {
            if (rindex - 1 >= 0) {
              var previousRow = this.grid.getView().getRow(rindex
                  - 1);
              this.currentRowEl = new Ext.Element(previousRow);
              this.currentRowEl.addClass('grid-row-insert-below');
            } else {
              this.currentRowEl.addClass('grid-row-insert-above');
            }
          }
        } catch (err) {
          console.warn(err);
          rindex = false;
        }
        return (rindex === false)
            ? this.dropNotAllowed
            : this.dropAllowed;
      },
      notifyOut : function(dd, e, data) {
        if (this.currentRowEl) {
          this.currentRowEl.removeClass('grid-row-insert-above');
          this.currentRowEl.removeClass('grid-row-insert-below');
        }
      }
    });
    if (this.targetCfg) {
      Ext.apply(this.target, this.targetCfg);
    }
    if (this.scrollable) {
      Ext.dd.ScrollManager.register(grid.getView().getEditorParent());
      grid.on({
            beforedestroy : this.onBeforeDestroy,
            scope : this,
            single : true
          });
    }
  },
  getTarget : function() {
    return this.target;
  },
  getGrid : function() {
    return this.grid;
  },
  getCopy : function() {
    return this.copy ? true : false;
  },
  setCopy : function(b) {
    this.copy = b ? true : false;
  },
  onBeforeDestroy : function(grid) {
    Ext.dd.ScrollManager.unregister(grid.getView().getEditorParent());
  }
});