-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>The source code</title>
- <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
- <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
-</head>
-<body onload="prettyPrint();">
- <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.1
- * Copyright(c) 2006-2010 Sencha Inc.
- * licensing@sencha.com
- * http://www.sencha.com/license
- */
-<div id="cls-Ext.dd.DropZone"></div>/**
- * @class Ext.dd.DropZone
+<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-dd.DropZone-method-constructor'><span id='Ext-dd.DropZone'>/**
+</span></span> * @class Ext.dd.DropZone
* @extends Ext.dd.DropTarget
- * <p>This class provides a container DD instance that allows dropping on multiple child target nodes.</p>
- * <p>By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
- * However a simpler way to allow a DropZone to manage any number of target elements is to configure the
- * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
- * mouse event to see if it has taken place within an element, or class of elements. This is easily done
- * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
- * {@link Ext.DomQuery} selector.</p>
- * <p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
- * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
- * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
- * of these methods to provide application-specific behaviour for these events to update both
- * application state, and UI state.</p>
- * <p>For example to make a GridPanel a cooperating target with the example illustrated in
- * {@link Ext.dd.DragZone DragZone}, the following technique might be used:</p><pre><code>
-myGridPanel.on('render', function() {
- myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
-// If the mouse is over a grid row, return that node. This is
-// provided as the "target" parameter in all "onNodeXXXX" node event handling functions
- getTargetFromEvent: function(e) {
- return e.getTarget(myGridPanel.getView().rowSelector);
- },
+This class provides a container DD instance that allows dropping on multiple child target nodes.
-// On entry into a target node, highlight that node.
- onNodeEnter : function(target, dd, e, data){
- Ext.fly(target).addClass('my-row-highlight-class');
- },
+By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
+However a simpler way to allow a DropZone to manage any number of target elements is to configure the
+DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
+mouse event to see if it has taken place within an element, or class of elements. This is easily done
+by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
+{@link Ext.DomQuery} selector.
-// On exit from a target node, unhighlight that node.
- onNodeOut : function(target, dd, e, data){
- Ext.fly(target).removeClass('my-row-highlight-class');
- },
+Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
+a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
+{@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
+of these methods to provide application-specific behaviour for these events to update both
+application state, and UI state.
-// While over a target node, return the default drop allowed class which
-// places a "tick" icon into the drag proxy.
- onNodeOver : function(target, dd, e, data){
- return Ext.dd.DropZone.prototype.dropAllowed;
- },
+For example to make a GridPanel a cooperating target with the example illustrated in
+{@link Ext.dd.DragZone DragZone}, the following technique might be used:
+
+ myGridPanel.on('render', function() {
+ myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
+
+ // If the mouse is over a grid row, return that node. This is
+ // provided as the "target" parameter in all "onNodeXXXX" node event handling functions
+ getTargetFromEvent: function(e) {
+ return e.getTarget(myGridPanel.getView().rowSelector);
+ },
+
+ // On entry into a target node, highlight that node.
+ onNodeEnter : function(target, dd, e, data){
+ Ext.fly(target).addCls('my-row-highlight-class');
+ },
+
+ // On exit from a target node, unhighlight that node.
+ onNodeOut : function(target, dd, e, data){
+ Ext.fly(target).removeCls('my-row-highlight-class');
+ },
+
+ // While over a target node, return the default drop allowed class which
+ // places a "tick" icon into the drag proxy.
+ onNodeOver : function(target, dd, e, data){
+ return Ext.dd.DropZone.prototype.dropAllowed;
+ },
+
+ // On node drop we can interrogate the target to find the underlying
+ // application object that is the real target of the dragged data.
+ // In this case, it is a Record in the GridPanel's Store.
+ // We can use the data set up by the DragZone's getDragData method to read
+ // any data we decided to attach in the DragZone's getDragData method.
+ onNodeDrop : function(target, dd, e, data){
+ var rowIndex = myGridPanel.getView().findRowIndex(target);
+ var r = myGridPanel.getStore().getAt(rowIndex);
+ Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
+ ' on Record id ' + r.id);
+ return true;
+ }
+ });
+ }
+
+See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
+cooperates with this DropZone.
-// On node drop we can interrogate the target to find the underlying
-// application object that is the real target of the dragged data.
-// In this case, it is a Record in the GridPanel's Store.
-// We can use the data set up by the DragZone's getDragData method to read
-// any data we decided to attach in the DragZone's getDragData method.
- onNodeDrop : function(target, dd, e, data){
- var rowIndex = myGridPanel.getView().findRowIndex(target);
- var r = myGridPanel.getStore().getAt(rowIndex);
- Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
- ' on Record id ' + r.id);
- return true;
- }
- });
-}
-</code></pre>
- * See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
- * cooperates with this DropZone.
* @constructor
* @param {Mixed} el The container element
* @param {Object} config
+ * @markdown
*/
-Ext.dd.DropZone = function(el, config){
- Ext.dd.DropZone.superclass.constructor.call(this, el, config);
-};
+Ext.define('Ext.dd.DropZone', {
+ extend: 'Ext.dd.DropTarget',
+ requires: ['Ext.dd.Registry'],
-Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {
- <div id="method-Ext.dd.DropZone-getTargetFromEvent"></div>/**
- * Returns a custom data object associated with the DOM node that is the target of the event. By default
+<span id='Ext-dd.DropZone-method-getTargetFromEvent'> /**
+</span> * Returns a custom data object associated with the DOM node that is the target of the event. By default
* this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
* provide your own custom lookup.
* @param {Event} e The event
return Ext.dd.Registry.getTargetFromEvent(e);
},
- <div id="method-Ext.dd.DropZone-onNodeEnter"></div>/**
- * Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
+<span id='Ext-dd.DropZone-method-onNodeEnter'> /**
+</span> * Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
* that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
* This method has no default implementation and should be overridden to provide
* node-specific processing if necessary.
},
- <div id="method-Ext.dd.DropZone-onNodeOver"></div>/**
- * Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
+<span id='Ext-dd.DropZone-method-onNodeOver'> /**
+</span> * Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
* that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
* The default implementation returns this.dropNotAllowed, so it should be
* overridden to provide the proper feedback.
return this.dropAllowed;
},
- <div id="method-Ext.dd.DropZone-onNodeOut"></div>/**
- * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
+<span id='Ext-dd.DropZone-method-onNodeOut'> /**
+</span> * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
* the drop node without dropping. This method has no default implementation and should be overridden to provide
* node-specific processing if necessary.
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
},
- <div id="method-Ext.dd.DropZone-onNodeDrop"></div>/**
- * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
+<span id='Ext-dd.DropZone-method-onNodeDrop'> /**
+</span> * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
* the drop node. The default implementation returns false, so it should be overridden to provide the
* appropriate processing of the drop event and return true so that the drag source's repair action does not run.
* @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
return false;
},
- <div id="method-Ext.dd.DropZone-onContainerOver"></div>/**
- * Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
+<span id='Ext-dd.DropZone-method-onContainerOver'> /**
+</span> * Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
* but not over any of its registered drop nodes. The default implementation returns this.dropNotAllowed, so
* it should be overridden to provide the proper feedback if necessary.
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
return this.dropNotAllowed;
},
- <div id="method-Ext.dd.DropZone-onContainerDrop"></div>/**
- * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
+<span id='Ext-dd.DropZone-method-onContainerDrop'> /**
+</span> * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
* but not on any of its registered drop nodes. The default implementation returns false, so it should be
* overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
* be able to accept drops. It should return true when valid so that the drag source's repair action does not run.
return false;
},
- <div id="method-Ext.dd.DropZone-notifyEnter"></div>/**
- * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
+<span id='Ext-dd.DropZone-method-notifyEnter'> /**
+</span> * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
* the zone. The default implementation returns this.dropNotAllowed and expects that only registered drop
* nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
* you should override this method and provide a custom implementation.
return this.dropNotAllowed;
},
- <div id="method-Ext.dd.DropZone-notifyOver"></div>/**
- * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
+<span id='Ext-dd.DropZone-method-notifyOver'> /**
+</span> * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
* This method will be called on every mouse movement while the drag source is over the drop zone.
* It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
* delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
*/
notifyOver : function(dd, e, data){
var n = this.getTargetFromEvent(e);
- if(!n){ // not over valid drop target
+ if(!n) { // not over valid drop target
if(this.lastOverNode){
this.onNodeOut(this.lastOverNode, dd, e, data);
this.lastOverNode = null;
return this.onNodeOver(n, dd, e, data);
},
- <div id="method-Ext.dd.DropZone-notifyOut"></div>/**
- * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
+<span id='Ext-dd.DropZone-method-notifyOut'> /**
+</span> * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
* out of the zone without dropping. If the drag source is currently over a registered node, the notification
* will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
}
},
- <div id="method-Ext.dd.DropZone-notifyDrop"></div>/**
- * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
+<span id='Ext-dd.DropZone-method-notifyDrop'> /**
+</span> * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
* been dropped on it. The drag zone will look up the target node based on the event passed in, and if there
* is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
* otherwise it will call {@link #onContainerDrop}.
* @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
* @param {Event} e The event
* @param {Object} data An object containing arbitrary data supplied by the drag source
- * @return {Boolean} True if the drop was valid, else false
+ * @return {Boolean} False if the drop was invalid.
*/
notifyDrop : function(dd, e, data){
if(this.lastOverNode){
},
// private
- triggerCacheRefresh : function(){
+ triggerCacheRefresh : function() {
Ext.dd.DDM.refreshCache(this.groups);
- }
-});</pre>
-</body>
-</html>
\ No newline at end of file
+ }
+});</pre></pre></body></html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff