ucan-ext-js-kitchen-sink/packages/local/common-ux/src/util/components/BodyGridRowDragDrop.js

my-ext-gen-app description for Ext JS app MyExtGenApp

Ext.define('UCAN.common.util.components.BodyGridRowDragDrop', {
  extend: 'Ext.grid.plugin.RowDragDrop',
  alias: 'plugin.bodygridrowdragdrop',

  onViewInitialize: function(view) {
    // function code copied from Ext.grid.plugin.RowDragDrop
    let me = this,
        dragZone = {};

    if (me.enableDrag) {
      if (me.proxy) {
        dragZone.proxy = me.proxy;
      }

      if (me.activateOnLongPress) {
        dragZone.activateOnLongPress = me.activateOnLongPress;
      }

      me.dragZone = new Ext.grid.GridDragZone(Ext.apply({
        element: view.bodyElement,
        view: view,
        dragText: me.dragText,
        handle: me.handle,
        groups: me.groups,
        scrollAmount: me.scrollAmount,
        containerScroll: me.containerScroll,
        constrain: Ext.getBody()
      }, dragZone));
    }

    if (me.enableDrop) {
      const gridDropZone = new Ext.grid.GridDropZone({
        view: view,
        element: view.bodyElement,
        groups: me.groups,
        dropIndicator: me.dropIndicator,
        overCls: me.overCls,
        copy: me.copy
      });
      Ext.apply(gridDropZone, {
        onDragMove: function(info) {
          let me = this,
              ddManager = Ext.dd.Manager,
              targetCmp = ddManager.getTargetComp(info),
              ddRecords, isSameGroup, highlight, store,
              targetRecord, isValidTarget, positionCls;

          highlight = ddManager.getPosition(info, targetCmp);

          positionCls = me.dropMarkerCls + '-' + highlight;

          if (!targetCmp || targetCmp.hasCls(positionCls)) {
            return;
          }

          if (targetCmp.getRecord) {
            targetRecord = targetCmp.getRecord();
            // added code to be able to drop into the grid rowbody
            if (!targetRecord && (typeof targetCmp.query === "function")) {
              const rows = targetCmp.query('gridrow');
              if (!Ext.isEmpty(rows)) {
                targetRecord = rows[rows.length - 1].getRecord();
              }
            }
          }

          isSameGroup = Ext.Array.intersect(me.getGroups(), info.source.getGroups()).length;

          if (!targetRecord || !isSameGroup) {
            if (targetCmp.getStore) {
              store = targetCmp.getStore();
            }

            // case: grid with 0 record
            if (!store || (store && store.getCount() > 0)) {
              return;
            }
          }

          ddRecords = info.data.dragData.records;
          isValidTarget = ddRecords.indexOf(targetRecord) === -1;

          if (me.ddEl) {
            me.removeDropMarker();
          }

          if (isValidTarget) {
            // add valid drop zone highlight
            me.addDropMarker(targetCmp, [me.dropIndicator, positionCls]);
            me.ddEl = targetCmp;
          }
        }
      });
      me.dropZone = gridDropZone;
    }

    if (!view.isLockedGrid) {
      me.addDragIndicator(view);
    }
  }
});