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