Upgrade to ExtJS 3.1.0 - Released 12/16/2009
[extjs.git] / docs / source / DropTarget.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.DropTarget"></div>/**\r
10  * @class Ext.dd.DropTarget\r
11  * @extends Ext.dd.DDTarget\r
12  * A simple class that provides the basic implementation needed to make any element a drop target that can have\r
13  * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.\r
14  * @constructor\r
15  * @param {Mixed} el The container element\r
16  * @param {Object} config\r
17  */\r
18 Ext.dd.DropTarget = function(el, config){\r
19     this.el = Ext.get(el);\r
20     \r
21     Ext.apply(this, config);\r
22     \r
23     if(this.containerScroll){\r
24         Ext.dd.ScrollManager.register(this.el);\r
25     }\r
26     \r
27     Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, \r
28           {isTarget: true});\r
29 \r
30 };\r
31 \r
32 Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {\r
33     <div id="cfg-Ext.dd.DropTarget-ddGroup"></div>/**\r
34      * @cfg {String} ddGroup\r
35      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only\r
36      * interact with other drag drop objects in the same group (defaults to undefined).\r
37      */\r
38     <div id="cfg-Ext.dd.DropTarget-overClass"></div>/**\r
39      * @cfg {String} overClass\r
40      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").\r
41      */\r
42     <div id="cfg-Ext.dd.DropTarget-dropAllowed"></div>/**\r
43      * @cfg {String} dropAllowed\r
44      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").\r
45      */\r
46     dropAllowed : "x-dd-drop-ok",\r
47     <div id="cfg-Ext.dd.DropTarget-dropNotAllowed"></div>/**\r
48      * @cfg {String} dropNotAllowed\r
49      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").\r
50      */\r
51     dropNotAllowed : "x-dd-drop-nodrop",\r
52 \r
53     // private\r
54     isTarget : true,\r
55 \r
56     // private\r
57     isNotifyTarget : true,\r
58 \r
59     <div id="method-Ext.dd.DropTarget-notifyEnter"></div>/**\r
60      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the\r
61      * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element\r
62      * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.\r
63      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target\r
64      * @param {Event} e The event\r
65      * @param {Object} data An object containing arbitrary data supplied by the drag source\r
66      * @return {String} status The CSS class that communicates the drop status back to the source so that the\r
67      * underlying {@link Ext.dd.StatusProxy} can be updated\r
68      */\r
69     notifyEnter : function(dd, e, data){\r
70         if(this.overClass){\r
71             this.el.addClass(this.overClass);\r
72         }\r
73         return this.dropAllowed;\r
74     },\r
75 \r
76     <div id="method-Ext.dd.DropTarget-notifyOver"></div>/**\r
77      * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.\r
78      * This method will be called on every mouse movement while the drag source is over the drop target.\r
79      * This default implementation simply returns the dropAllowed config value.\r
80      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target\r
81      * @param {Event} e The event\r
82      * @param {Object} data An object containing arbitrary data supplied by the drag source\r
83      * @return {String} status The CSS class that communicates the drop status back to the source so that the\r
84      * underlying {@link Ext.dd.StatusProxy} can be updated\r
85      */\r
86     notifyOver : function(dd, e, data){\r
87         return this.dropAllowed;\r
88     },\r
89 \r
90     <div id="method-Ext.dd.DropTarget-notifyOut"></div>/**\r
91      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged\r
92      * out of the target without dropping.  This default implementation simply removes the CSS class specified by\r
93      * overClass (if any) from the drop element.\r
94      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target\r
95      * @param {Event} e The event\r
96      * @param {Object} data An object containing arbitrary data supplied by the drag source\r
97      */\r
98     notifyOut : function(dd, e, data){\r
99         if(this.overClass){\r
100             this.el.removeClass(this.overClass);\r
101         }\r
102     },\r
103 \r
104     <div id="method-Ext.dd.DropTarget-notifyDrop"></div>/**\r
105      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has\r
106      * been dropped on it.  This method has no default implementation and returns false, so you must provide an\r
107      * implementation that does something to process the drop event and returns true so that the drag source's\r
108      * repair action does not run.\r
109      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target\r
110      * @param {Event} e The event\r
111      * @param {Object} data An object containing arbitrary data supplied by the drag source\r
112      * @return {Boolean} True if the drop was valid, else false\r
113      */\r
114     notifyDrop : function(dd, e, data){\r
115         return false;\r
116     }\r
117 });</pre>    \r
118 </body>\r
119 </html>