src/widgets/PanelDD.js

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