Upgrade to ExtJS 4.0.2 - Released 06/09/2011
[extjs.git] / docs / source / DragZone3.html
index 138fc16..793d885 100644 (file)
   </script>
 </head>
 <body onload="prettyPrint(); highlight();">
-  <pre class="prettyprint lang-js"><span id='Ext-view-DragZone'>/**
-</span> * @class Ext.view.DragZone
+  <pre class="prettyprint lang-js"><span id='Ext-grid-header-DragZone'>/**
+</span> * @class Ext.grid.header.DragZone
  * @extends Ext.dd.DragZone
  * @private
  */
-Ext.define('Ext.view.DragZone', {
+Ext.define('Ext.grid.header.DragZone', {
     extend: 'Ext.dd.DragZone',
-    containerScroll: false,
+    colHeaderCls: Ext.baseCSSPrefix + 'column-header',
+    maxProxyWidth: 120,
 
-    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');
+    constructor: function(headerCt) {
+        this.headerCt = headerCt;
+        this.ddGroup =  this.getDDGroup();
+        this.callParent([headerCt.el]);
+        this.proxy.el.addCls(Ext.baseCSSPrefix + 'grid-col-dd');
     },
 
-    init: function(id, sGroup, config) {
-        this.initTarget(id, sGroup, config);
-        this.view.mon(this.view, {
-            itemmousedown: this.onItemMouseDown,
-            scope: this
-        });
-    },
-
-    onItemMouseDown: function(view, record, item, index, e) {
-        if (!this.isPreventDrag(e, record, item, index)) {
-            this.handleMouseDown(e);
-        }
-    },
-
-    // private template method
-    isPreventDrag: function(e) {
-        return false;
+    getDDGroup: function() {
+        return 'header-dd-zone-' + this.headerCt.up('[scrollerOwner]').id;
     },
 
     getDragData: function(e) {
-        var view = this.view,
-            item = e.getTarget(view.getItemSelector()),
-            record, selectionModel, records;
+        var header = e.getTarget('.'+this.colHeaderCls),
+            headerCmp;
 
-        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()
-            };
+        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
+                };
+            }
         }
+        return 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;
+    onBeforeDrag: function() {
+        return !(this.headerCt.dragging || this.disabled);
+    },
 
-        // 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);
-        }
-        data.records = selectionModel.getSelection();
+    onInitDrag: function() {
+        this.headerCt.dragging = true;
+        this.callParent(arguments);
+    },
 
-        me.ddel.update(me.getDragText());
-        me.proxy.update(me.ddel.dom);
-        me.onStartDrag(x, y);
-        return true;
+    onDragDrop: function() {
+        this.headerCt.dragging = false;
+        this.callParent(arguments);
     },
 
-    getDragText: function() {
-        var count = this.dragData.records.length;
-        return Ext.String.format(this.dragText, count, count == 1 ? '' : 's');
+    afterRepair: function() {
+        this.callParent();
+        this.headerCt.dragging = false;
     },
 
-    getRepairXY : function(e, data){
-        return data ? data.fromPosition : false;
+    getRepairXY: function() {
+        return this.dragData.header.el.getXY();
+    },
+    
+    disable: function() {
+        this.disabled = true;
+    },
+    
+    enable: function() {
+        this.disabled = false;
     }
-});</pre>
+});
+</pre>
 </body>
 </html>