docs/source/DragZone2.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-view-DragZone'>/**
  19 </span> * @class Ext.view.DragZone
  20  * @extends Ext.dd.DragZone
  21  * @private
  22  */
  23 Ext.define('Ext.view.DragZone', {
  24     extend: 'Ext.dd.DragZone',
  25     containerScroll: false,
  26
  27     constructor: function(config) {
  28         var me = this;
  29
  30         Ext.apply(me, config);
  31
  32         // Create a ddGroup unless one has been configured.
  33         // User configuration of ddGroups allows users to specify which
  34         // DD instances can interact with each other. Using one
  35         // based on the id of the View would isolate it and mean it can only
  36         // interact with a DropZone on the same View also using a generated ID.
  37         if (!me.ddGroup) {
  38             me.ddGroup = 'view-dd-zone-' + me.view.id;
  39         }
  40
  41         // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
  42         // So a View's DragZone cannot use the View's main element because the DropZone must use that
  43         // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
  44         // main element which handles scrolling.
  45         // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
  46         // is transient; DataView's recreate the internal structure dynamically as data changes.
  47         // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
  48         me.callParent([me.view.el.dom.parentNode]);
  49
  50         me.ddel = Ext.get(document.createElement('div'));
  51         me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
  52     },
  53
  54     init: function(id, sGroup, config) {
  55         this.initTarget(id, sGroup, config);
  56         this.view.mon(this.view, {
  57             itemmousedown: this.onItemMouseDown,
  58             scope: this
  59         });
  60     },
  61
  62     onItemMouseDown: function(view, record, item, index, e) {
  63         if (!this.isPreventDrag(e, record, item, index)) {
  64             this.handleMouseDown(e);
  65
  66             // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
  67             // if the mousedowned record is selected
  68             if (view.getSelectionModel().selectionMode == 'MULTI' &amp;&amp; !e.ctrlKey &amp;&amp; view.getSelectionModel().isSelected(record)) {
  69                 return false;
  70             }
  71         }
  72     },
  73
  74     // private template method
  75     isPreventDrag: function(e) {
  76         return false;
  77     },
  78
  79     getDragData: function(e) {
  80         var view = this.view,
  81             item = e.getTarget(view.getItemSelector()),
  82             record, selectionModel, records;
  83
  84         if (item) {
  85             record = view.getRecord(item);
  86             selectionModel = view.getSelectionModel();
  87             records = selectionModel.getSelection();
  88             return {
  89                 copy: this.view.copy || (this.view.allowCopy &amp;&amp; e.ctrlKey),
  90                 event: new Ext.EventObjectImpl(e),
  91                 view: view,
  92                 ddel: this.ddel,
  93                 item: item,
  94                 records: records,
  95                 fromPosition: Ext.fly(item).getXY()
  96             };
  97         }
  98     },
  99
 100     onInitDrag: function(x, y) {
 101         var me = this,
 102             data = me.dragData,
 103             view = data.view,
 104             selectionModel = view.getSelectionModel(),
 105             record = view.getRecord(data.item),
 106             e = data.event;
 107
 108         // Update the selection to match what would have been selected if the user had
 109         // done a full click on the target node rather than starting a drag from it
 110         if (!selectionModel.isSelected(record) || e.hasModifier()) {
 111             selectionModel.selectWithEvent(record, e, true);
 112         }
 113         data.records = selectionModel.getSelection();
 114
 115         me.ddel.update(me.getDragText());
 116         me.proxy.update(me.ddel.dom);
 117         me.onStartDrag(x, y);
 118         return true;
 119     },
 120
 121     getDragText: function() {
 122         var count = this.dragData.records.length;
 123         return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
 124     },
 125
 126     getRepairXY : function(e, data){
 127         return data ? data.fromPosition : false;
 128     }
 129 });</pre>
 130 </body>
 131 </html>