src/panel/Proxy.js

   1 /**
   2  * @class Ext.panel.Proxy
   3  * @extends Object
   4  * A custom drag proxy implementation specific to {@link Ext.panel.Panel}s. This class
   5  * is primarily used internally for the Panel's drag drop implementation, and
   6  * should never need to be created directly.
   7  * @constructor
   8  * @param panel The {@link Ext.panel.Panel} to proxy for
   9  * @param config Configuration options
  10  */
  11 Ext.define('Ext.panel.Proxy', {
  12
  13     alternateClassName: 'Ext.dd.PanelProxy',
  14
  15     constructor: function(panel, config){
  16         /**
  17          * @property panel
  18          * @type Ext.panel.Panel
  19          */
  20         this.panel = panel;
  21         this.id = this.panel.id +'-ddproxy';
  22         Ext.apply(this, config);
  23     },
  24
  25     /**
  26      * @cfg {Boolean} insertProxy True to insert a placeholder proxy element
  27      * while dragging the panel, false to drag with no proxy (defaults to true).
  28      * Most Panels are not absolute positioned and therefore we need to reserve
  29      * this space.
  30      */
  31     insertProxy: true,
  32
  33     // private overrides
  34     setStatus: Ext.emptyFn,
  35     reset: Ext.emptyFn,
  36     update: Ext.emptyFn,
  37     stop: Ext.emptyFn,
  38     sync: Ext.emptyFn,
  39
  40     /**
  41      * Gets the proxy's element
  42      * @return {Element} The proxy's element
  43      */
  44     getEl: function(){
  45         return this.ghost.el;
  46     },
  47
  48     /**
  49      * Gets the proxy's ghost Panel
  50      * @return {Panel} The proxy's ghost Panel
  51      */
  52     getGhost: function(){
  53         return this.ghost;
  54     },
  55
  56     /**
  57      * Gets the proxy element. This is the element that represents where the
  58      * Panel was before we started the drag operation.
  59      * @return {Element} The proxy's element
  60      */
  61     getProxy: function(){
  62         return this.proxy;
  63     },
  64
  65     /**
  66      * Hides the proxy
  67      */
  68     hide : function(){
  69         if (this.ghost) {
  70             if (this.proxy) {
  71                 this.proxy.remove();
  72                 delete this.proxy;
  73             }
  74
  75             // Unghost the Panel, do not move the Panel to where the ghost was
  76             this.panel.unghost(null, false);
  77             delete this.ghost;
  78         }
  79     },
  80
  81     /**
  82      * Shows the proxy
  83      */
  84     show: function(){
  85         if (!this.ghost) {
  86             var panelSize = this.panel.getSize();
  87             this.panel.el.setVisibilityMode(Ext.core.Element.DISPLAY);
  88             this.ghost = this.panel.ghost();
  89             if (this.insertProxy) {
  90                 // bc Panels aren't absolute positioned we need to take up the space
  91                 // of where the panel previously was
  92                 this.proxy = this.panel.el.insertSibling({cls: Ext.baseCSSPrefix + 'panel-dd-spacer'});
  93                 this.proxy.setSize(panelSize);
  94             }
  95         }
  96     },
  97
  98     // private
  99     repair: function(xy, callback, scope) {
 100         this.hide();
 101         if (typeof callback == "function") {
 102             callback.call(scope || this);
 103         }
 104     },
 105
 106     /**
 107      * Moves the proxy to a different position in the DOM.  This is typically
 108      * called while dragging the Panel to keep the proxy sync'd to the Panel's
 109      * location.
 110      * @param {HTMLElement} parentNode The proxy's parent DOM node
 111      * @param {HTMLElement} before (optional) The sibling node before which the
 112      * proxy should be inserted (defaults to the parent's last child if not
 113      * specified)
 114      */
 115     moveProxy : function(parentNode, before){
 116         if (this.proxy) {
 117             parentNode.insertBefore(this.proxy.dom, before);
 118         }
 119     }
 120 });