source/widgets/grid/GridDD.js

   1 /*\r
   2  * Ext JS Library 2.2.1\r
   3  * Copyright(c) 2006-2009, Ext JS, LLC.\r
   4  * licensing@extjs.com\r
   5  * \r
   6  * http://extjs.com/license\r
   7  */\r
   8 \r
   9 /**\r
  10  * @class Ext.grid.GridDragZone\r
  11  * @extends Ext.dd.DragZone\r
  12  * <p>A customized implementation of a {@link Ext.dd.DragZone DragZone} which provides default implementations of two of the\r
  13  * template methods of DragZone to enable dragging of the selected rows of a GridPanel.</p>\r
  14  * <p>A cooperating {@link Ext.dd.DropZone DropZone} must be created who's template method implementations of\r
  15  * {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},\r
  16  * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop}</p> are able\r
  17  * to process the {@link #getDragData data} which is provided.\r
  18  */\r
  19 Ext.grid.GridDragZone = function(grid, config){\r
  20     this.view = grid.getView();\r
  21     Ext.grid.GridDragZone.superclass.constructor.call(this, this.view.mainBody.dom, config);\r
  22     if(this.view.lockedBody){\r
  23         this.setHandleElId(Ext.id(this.view.mainBody.dom));\r
  24         this.setOuterHandleElId(Ext.id(this.view.lockedBody.dom));\r
  25     }\r
  26     this.scroll = false;\r
  27     this.grid = grid;\r
  28     this.ddel = document.createElement('div');\r
  29     this.ddel.className = 'x-grid-dd-wrap';\r
  30 };\r
  31 \r
  32 Ext.extend(Ext.grid.GridDragZone, Ext.dd.DragZone, {\r
  33     ddGroup : "GridDD",\r
  34 \r
  35     /**\r
  36      * <p>The provided implementation of the getDragData method which collects the data to be dragged from the GridPanel on mousedown.</p>\r
  37      * <p>This data is available for processing in the {@link Ext.dd.DropZone#onNodeEnter onNodeEnter}, {@link Ext.dd.DropZone#onNodeOver onNodeOver},\r
  38      * {@link Ext.dd.DropZone#onNodeOut onNodeOut} and {@link Ext.dd.DropZone#onNodeDrop onNodeDrop} methods of a cooperating {@link Ext.dd.DropZone DropZone}.</p>\r
  39      * <p>The data object contains the following properties:<ul>\r
  40      * <li><b>grid</b> : Ext.Grid.GridPanel<div class="sub-desc">The GridPanel from which the data is being dragged.</div></li>\r
  41      * <li><b>ddel</b> : htmlElement<div class="sub-desc">An htmlElement which provides the "picture" of the data being dragged.</div></li>\r
  42      * <li><b>rowIndex</b> : Number<div class="sub-desc">The index of the row which receieved the mousedown gesture which triggered the drag.</div></li>\r
  43      * <li><b>selections</b> : Array<div class="sub-desc">An Array of the selected Records which are being dragged from the GridPanel.</div></li>\r
  44      * </ul></p>\r
  45      */\r
  46     getDragData : function(e){\r
  47         var t = Ext.lib.Event.getTarget(e);\r
  48         var rowIndex = this.view.findRowIndex(t);\r
  49         if(rowIndex !== false){\r
  50             var sm = this.grid.selModel;\r
  51             if(!sm.isSelected(rowIndex) || e.hasModifier()){\r
  52                 sm.handleMouseDown(this.grid, rowIndex, e);\r
  53             }\r
  54             return {grid: this.grid, ddel: this.ddel, rowIndex: rowIndex, selections:sm.getSelections()};\r
  55         }\r
  56         return false;\r
  57     },\r
  58 \r
  59     /**\r
  60      * <p>The provided implementation of the onInitDrag method. Sets the <tt>innerHTML</tt> of the drag proxy which provides the "picture"\r
  61      * of the data being dragged.</p>\r
  62      * <p>The <tt>innerHTML</tt> data is found by calling the owning GridPanel's {@link Ext.grid.GridPanel#getDragDropText getDragDropText}.</p>\r
  63      */\r
  64     onInitDrag : function(e){\r
  65         var data = this.dragData;\r
  66         this.ddel.innerHTML = this.grid.getDragDropText();\r
  67         this.proxy.update(this.ddel);\r
  68         // fire start drag?\r
  69     },\r
  70 \r
  71     /**\r
  72      * An empty immplementation. Implement this to provide behaviour after a repair of an invalid drop. An implementation might highlight\r
  73      * the selected rows to show that they have not been dragged.\r
  74      */\r
  75     afterRepair : function(){\r
  76         this.dragging = false;\r
  77     },\r
  78 \r
  79     /**\r
  80      * <p>An empty implementation. Implement this to provide coordinates for the drag proxy to slide back to after an invalid drop.</p>\r
  81      * <p>Called before a repair of an invalid drop to get the XY to animate to.</p>\r
  82      * @param {EventObject} e The mouse up event\r
  83      * @return {Array} The xy location (e.g. [100, 200])\r
  84      */\r
  85     getRepairXY : function(e, data){\r
  86         return false;\r
  87     },\r
  88 \r
  89     onEndDrag : function(data, e){\r
  90         // fire end drag?\r
  91     },\r
  92 \r
  93     onValidDrop : function(dd, e, id){\r
  94         // fire drag drop?\r
  95         this.hideProxy();\r
  96     },\r
  97 \r
  98     beforeInvalidDrop : function(e, id){\r
  99 \r
 100     }\r
 101 });\r