src/view/DragZone.js

   1 /**
   2  * @class Ext.view.DragZone
   3  * @extends Ext.dd.DragZone
   4  * @private
   5  */
   6 Ext.define('Ext.view.DragZone', {
   7     extend: 'Ext.dd.DragZone',
   8     containerScroll: false,
   9
  10     constructor: function(config) {
  11         var me = this;
  12
  13         Ext.apply(me, config);
  14
  15         // Create a ddGroup unless one has been configured.
  16         // User configuration of ddGroups allows users to specify which
  17         // DD instances can interact with each other. Using one
  18         // based on the id of the View would isolate it and mean it can only
  19         // interact with a DropZone on the same View also using a generated ID.
  20         if (!me.ddGroup) {
  21             me.ddGroup = 'view-dd-zone-' + me.view.id;
  22         }
  23
  24         // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
  25         // So a View's DragZone cannot use the View's main element because the DropZone must use that
  26         // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
  27         // main element which handles scrolling.
  28         // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
  29         // is transient; DataView's recreate the internal structure dynamically as data changes.
  30         // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
  31         me.callParent([me.view.el.dom.parentNode]);
  32
  33         me.ddel = Ext.get(document.createElement('div'));
  34         me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
  35     },
  36
  37     init: function(id, sGroup, config) {
  38         this.initTarget(id, sGroup, config);
  39         this.view.mon(this.view, {
  40             itemmousedown: this.onItemMouseDown,
  41             scope: this
  42         });
  43     },
  44
  45     onItemMouseDown: function(view, record, item, index, e) {
  46         if (!this.isPreventDrag(e, record, item, index)) {
  47             this.handleMouseDown(e);
  48         }
  49     },
  50
  51     // private template method
  52     isPreventDrag: function(e) {
  53         return false;
  54     },
  55
  56     getDragData: function(e) {
  57         var view = this.view,
  58             item = e.getTarget(view.getItemSelector()),
  59             record, selectionModel, records;
  60
  61         if (item) {
  62             record = view.getRecord(item);
  63             selectionModel = view.getSelectionModel();
  64             records = selectionModel.getSelection();
  65             return {
  66                 copy: this.view.copy || (this.view.allowCopy && e.ctrlKey),
  67                 event: new Ext.EventObjectImpl(e),
  68                 view: view,
  69                 ddel: this.ddel,
  70                 item: item,
  71                 records: records,
  72                 fromPosition: Ext.fly(item).getXY()
  73             };
  74         }
  75     },
  76
  77     onInitDrag: function(x, y) {
  78         var me = this,
  79             data = me.dragData,
  80             view = data.view,
  81             selectionModel = view.getSelectionModel(),
  82             record = view.getRecord(data.item),
  83             e = data.event;
  84
  85         // Update the selection to match what would have been selected if the user had
  86         // done a full click on the target node rather than starting a drag from it
  87         if (!selectionModel.isSelected(record) || e.hasModifier()) {
  88             selectionModel.selectWithEvent(record, e);
  89         }
  90         data.records = selectionModel.getSelection();
  91
  92         me.ddel.update(me.getDragText());
  93         me.proxy.update(me.ddel.dom);
  94         me.onStartDrag(x, y);
  95         return true;
  96     },
  97
  98     getDragText: function() {
  99         var count = this.dragData.records.length;
 100         return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
 101     },
 102
 103     getRepairXY : function(e, data){
 104         return data ? data.fromPosition : false;
 105     }
 106 });