src/widgets/PanelDD.js

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