src/widgets/PanelDD.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.dd.PanelProxy
   9  * A custom drag proxy implementation specific to {@link Ext.Panel}s. This class is primarily used internally
  10  * for the Panel's drag drop implementation, and should never need to be created directly.
  11  * @constructor
  12  * @param panel The {@link Ext.Panel} to proxy for
  13  * @param config Configuration options
  14  */
  15 Ext.dd.PanelProxy = function(panel, config){
  16     this.panel = panel;
  17     this.id = this.panel.id +'-ddproxy';
  18     Ext.apply(this, config);
  19 };
  20
  21 Ext.dd.PanelProxy.prototype = {
  22     /**
  23      * @cfg {Boolean} insertProxy True to insert a placeholder proxy element while dragging the panel,
  24      * false to drag with no proxy (defaults to true).
  25      */
  26     insertProxy : true,
  27
  28     // private overrides
  29     setStatus : Ext.emptyFn,
  30     reset : Ext.emptyFn,
  31     update : Ext.emptyFn,
  32     stop : Ext.emptyFn,
  33     sync: Ext.emptyFn,
  34
  35     /**
  36      * Gets the proxy's element
  37      * @return {Element} The proxy's element
  38      */
  39     getEl : function(){
  40         return this.ghost;
  41     },
  42
  43     /**
  44      * Gets the proxy's ghost element
  45      * @return {Element} The proxy's ghost element
  46      */
  47     getGhost : function(){
  48         return this.ghost;
  49     },
  50
  51     /**
  52      * Gets the proxy's element
  53      * @return {Element} The proxy's element
  54      */
  55     getProxy : function(){
  56         return this.proxy;
  57     },
  58
  59     /**
  60      * Hides the proxy
  61      */
  62     hide : function(){
  63         if(this.ghost){
  64             if(this.proxy){
  65                 this.proxy.remove();
  66                 delete this.proxy;
  67             }
  68             this.panel.el.dom.style.display = '';
  69             this.ghost.remove();
  70             delete this.ghost;
  71         }
  72     },
  73
  74     /**
  75      * Shows the proxy
  76      */
  77     show : function(){
  78         if(!this.ghost){
  79             this.ghost = this.panel.createGhost(undefined, undefined, Ext.getBody());
  80             this.ghost.setXY(this.panel.el.getXY());
  81             if(this.insertProxy){
  82                 this.proxy = this.panel.el.insertSibling({cls:'x-panel-dd-spacer'});
  83                 this.proxy.setSize(this.panel.getSize());
  84             }
  85             this.panel.el.dom.style.display = 'none';
  86         }
  87     },
  88
  89     // private
  90     repair : function(xy, callback, scope){
  91         this.hide();
  92         if(typeof callback == "function"){
  93             callback.call(scope || this);
  94         }
  95     },
  96
  97     /**
  98      * Moves the proxy to a different position in the DOM.  This is typically called while dragging the Panel
  99      * to keep the proxy sync'd to the Panel's location.
 100      * @param {HTMLElement} parentNode The proxy's parent DOM node
 101      * @param {HTMLElement} before (optional) The sibling node before which the proxy should be inserted (defaults
 102      * to the parent's last child if not specified)
 103      */
 104     moveProxy : function(parentNode, before){
 105         if(this.proxy){
 106             parentNode.insertBefore(this.proxy.dom, before);
 107         }
 108     }
 109 };
 110
 111 // private - DD implementation for Panels
 112 Ext.Panel.DD = function(panel, cfg){
 113     this.panel = panel;
 114     this.dragData = {panel: panel};
 115     this.proxy = new Ext.dd.PanelProxy(panel, cfg);
 116     Ext.Panel.DD.superclass.constructor.call(this, panel.el, cfg);
 117     var h = panel.header;
 118     if(h){
 119         this.setHandleElId(h.id);
 120     }
 121     (h ? h : this.panel.body).setStyle('cursor', 'move');
 122     this.scroll = false;
 123 };
 124
 125 Ext.extend(Ext.Panel.DD, Ext.dd.DragSource, {
 126     showFrame: Ext.emptyFn,
 127     startDrag: Ext.emptyFn,
 128     b4StartDrag: function(x, y) {
 129         this.proxy.show();
 130     },
 131     b4MouseDown: function(e) {
 132         var x = e.getPageX();
 133         var y = e.getPageY();
 134         this.autoOffset(x, y);
 135     },
 136     onInitDrag : function(x, y){
 137         this.onStartDrag(x, y);
 138         return true;
 139     },
 140     createFrame : Ext.emptyFn,
 141     getDragEl : function(e){
 142         return this.proxy.ghost.dom;
 143     },
 144     endDrag : function(e){
 145         this.proxy.hide();
 146         this.panel.saveState();
 147     },
 148
 149     autoOffset : function(x, y) {
 150         x -= this.startPageX;
 151         y -= this.startPageY;
 152         this.setDelta(x, y);
 153     }
 154 });