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