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