Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / DragZone2.html
index 793d885..b109766 100644 (file)
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-grid-header-DragZone'>/**
-</span> * @class Ext.grid.header.DragZone
+  <pre class="prettyprint lang-js"><span id='Ext-view-DragZone'>/**
+</span> * @class Ext.view.DragZone
  * @extends Ext.dd.DragZone
  * @private
  */
-Ext.define('Ext.grid.header.DragZone', {
+Ext.define('Ext.view.DragZone', {
     extend: 'Ext.dd.DragZone',
-    colHeaderCls: Ext.baseCSSPrefix + 'column-header',
-    maxProxyWidth: 120,
-
-    constructor: function(headerCt) {
-        this.headerCt = headerCt;
-        this.ddGroup =  this.getDDGroup();
-        this.callParent([headerCt.el]);
-        this.proxy.el.addCls(Ext.baseCSSPrefix + 'grid-col-dd');
+    containerScroll: false,
+
+    constructor: function(config) {
+        var me = this;
+
+        Ext.apply(me, config);
+
+        // Create a ddGroup unless one has been configured.
+        // User configuration of ddGroups allows users to specify which
+        // DD instances can interact with each other. Using one
+        // based on the id of the View would isolate it and mean it can only
+        // interact with a DropZone on the same View also using a generated ID.
+        if (!me.ddGroup) {
+            me.ddGroup = 'view-dd-zone-' + me.view.id;
+        }
+
+        // Ext.dd.DragDrop instances are keyed by the ID of their encapsulating element.
+        // So a View's DragZone cannot use the View's main element because the DropZone must use that
+        // because the DropZone may need to scroll on hover at a scrolling boundary, and it is the View's
+        // main element which handles scrolling.
+        // We use the View's parent element to drag from. Ideally, we would use the internal structure, but that
+        // is transient; DataView's recreate the internal structure dynamically as data changes.
+        // TODO: Ext 5.0 DragDrop must allow multiple DD objects to share the same element.
+        me.callParent([me.view.el.dom.parentNode]);
+
+        me.ddel = Ext.get(document.createElement('div'));
+        me.ddel.addCls(Ext.baseCSSPrefix + 'grid-dd-wrap');
     },
 
-    getDDGroup: function() {
-        return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;
+    init: function(id, sGroup, config) {
+        this.initTarget(id, sGroup, config);
+        this.view.mon(this.view, {
+            itemmousedown: this.onItemMouseDown,
+            scope: this
+        });
     },
 
-    getDragData: function(e) {
-        var header = e.getTarget('.'+this.colHeaderCls),
-            headerCmp;
-
-        if (header) {
-            headerCmp = Ext.getCmp(header.id);
-            if (!this.headerCt.dragging &amp;&amp; headerCmp.draggable &amp;&amp; !(headerCmp.isOnLeftEdge(e) || headerCmp.isOnRightEdge(e))) {
-                var ddel = document.createElement('div');
-                ddel.innerHTML = Ext.getCmp(header.id).text;
-                return {
-                    ddel: ddel,
-                    header: headerCmp
-                };
+    onItemMouseDown: function(view, record, item, index, e) {
+        if (!this.isPreventDrag(e, record, item, index)) {
+            this.handleMouseDown(e);
+
+            // If we want to allow dragging of multi-selections, then veto the following handlers (which, in the absence of ctrlKey, would deselect)
+            // if the mousedowned record is selected
+            if (view.getSelectionModel().selectionMode == 'MULTI' &amp;&amp; !e.ctrlKey &amp;&amp; view.getSelectionModel().isSelected(record)) {
+                return false;
             }
         }
-        return false;
     },
 
-    onBeforeDrag: function() {
-        return !(this.headerCt.dragging || this.disabled);
+    // private template method
+    isPreventDrag: function(e) {
+        return false;
     },
 
-    onInitDrag: function() {
-        this.headerCt.dragging = true;
-        this.callParent(arguments);
-    },
+    getDragData: function(e) {
+        var view = this.view,
+            item = e.getTarget(view.getItemSelector()),
+            record, selectionModel, records;
 
-    onDragDrop: function() {
-        this.headerCt.dragging = false;
-        this.callParent(arguments);
+        if (item) {
+            record = view.getRecord(item);
+            selectionModel = view.getSelectionModel();
+            records = selectionModel.getSelection();
+            return {
+                copy: this.view.copy || (this.view.allowCopy &amp;&amp; e.ctrlKey),
+                event: new Ext.EventObjectImpl(e),
+                view: view,
+                ddel: this.ddel,
+                item: item,
+                records: records,
+                fromPosition: Ext.fly(item).getXY()
+            };
+        }
     },
 
-    afterRepair: function() {
-        this.callParent();
-        this.headerCt.dragging = false;
-    },
+    onInitDrag: function(x, y) {
+        var me = this,
+            data = me.dragData,
+            view = data.view,
+            selectionModel = view.getSelectionModel(),
+            record = view.getRecord(data.item),
+            e = data.event;
 
-    getRepairXY: function() {
-        return this.dragData.header.el.getXY();
+        // Update the selection to match what would have been selected if the user had
+        // done a full click on the target node rather than starting a drag from it
+        if (!selectionModel.isSelected(record) || e.hasModifier()) {
+            selectionModel.selectWithEvent(record, e, true);
+        }
+        data.records = selectionModel.getSelection();
+
+        me.ddel.update(me.getDragText());
+        me.proxy.update(me.ddel.dom);
+        me.onStartDrag(x, y);
+        return true;
     },
-    
-    disable: function() {
-        this.disabled = true;
+
+    getDragText: function() {
+        var count = this.dragData.records.length;
+        return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
     },
-    
-    enable: function() {
-        this.disabled = false;
+
+    getRepairXY : function(e, data){
+        return data ? data.fromPosition : false;
     }
-});
-</pre>
+});</pre>
 </body>
 </html>