/javascripts/lib/src/widgets/grid/GridDD.js

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