ext-dd-debug.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:151k
源码类别:

中间件编程

开发平台:

JavaScript

  1.                 this.proxy.setStatus(status);
  2.             }
  3.             if(this.afterDragOver){
  4.                 /**
  5.                  * An empty function by default, but provided so that you can perform a custom action
  6.                  * while the dragged item is over the drop target by providing an implementation.
  7.                  * @param {Ext.dd.DragDrop} target The drop target
  8.                  * @param {Event} e The event object
  9.                  * @param {String} id The id of the dragged element
  10.                  * @method afterDragOver
  11.                  */
  12.                 this.afterDragOver(target, e, id);
  13.             }
  14.         }
  15.     },
  16.     /**
  17.      * An empty function by default, but provided so that you can perform a custom action
  18.      * while the dragged item is over the drop target and optionally cancel the onDragOver.
  19.      * @param {Ext.dd.DragDrop} target The drop target
  20.      * @param {Event} e The event object
  21.      * @param {String} id The id of the dragged element
  22.      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  23.      */
  24.     beforeDragOver : function(target, e, id){
  25.         return true;
  26.     },
  27.     // private
  28.     onDragOut : function(e, id){
  29.         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
  30.         if(this.beforeDragOut(target, e, id) !== false){
  31.             if(target.isNotifyTarget){
  32.                 target.notifyOut(this, e, this.dragData);
  33.             }
  34.             this.proxy.reset();
  35.             if(this.afterDragOut){
  36.                 /**
  37.                  * An empty function by default, but provided so that you can perform a custom action
  38.                  * after the dragged item is dragged out of the target without dropping.
  39.                  * @param {Ext.dd.DragDrop} target The drop target
  40.                  * @param {Event} e The event object
  41.                  * @param {String} id The id of the dragged element
  42.                  * @method afterDragOut
  43.                  */
  44.                 this.afterDragOut(target, e, id);
  45.             }
  46.         }
  47.         this.cachedTarget = null;
  48.     },
  49.     /**
  50.      * An empty function by default, but provided so that you can perform a custom action before the dragged
  51.      * item is dragged out of the target without dropping, and optionally cancel the onDragOut.
  52.      * @param {Ext.dd.DragDrop} target The drop target
  53.      * @param {Event} e The event object
  54.      * @param {String} id The id of the dragged element
  55.      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  56.      */
  57.     beforeDragOut : function(target, e, id){
  58.         return true;
  59.     },
  60.     
  61.     // private
  62.     onDragDrop : function(e, id){
  63.         var target = this.cachedTarget || Ext.dd.DragDropMgr.getDDById(id);
  64.         if(this.beforeDragDrop(target, e, id) !== false){
  65.             if(target.isNotifyTarget){
  66.                 if(target.notifyDrop(this, e, this.dragData)){ // valid drop?
  67.                     this.onValidDrop(target, e, id);
  68.                 }else{
  69.                     this.onInvalidDrop(target, e, id);
  70.                 }
  71.             }else{
  72.                 this.onValidDrop(target, e, id);
  73.             }
  74.             
  75.             if(this.afterDragDrop){
  76.                 /**
  77.                  * An empty function by default, but provided so that you can perform a custom action
  78.                  * after a valid drag drop has occurred by providing an implementation.
  79.                  * @param {Ext.dd.DragDrop} target The drop target
  80.                  * @param {Event} e The event object
  81.                  * @param {String} id The id of the dropped element
  82.                  * @method afterDragDrop
  83.                  */
  84.                 this.afterDragDrop(target, e, id);
  85.             }
  86.         }
  87.         delete this.cachedTarget;
  88.     },
  89.     /**
  90.      * An empty function by default, but provided so that you can perform a custom action before the dragged
  91.      * item is dropped onto the target and optionally cancel the onDragDrop.
  92.      * @param {Ext.dd.DragDrop} target The drop target
  93.      * @param {Event} e The event object
  94.      * @param {String} id The id of the dragged element
  95.      * @return {Boolean} isValid True if the drag drop event is valid, else false to cancel
  96.      */
  97.     beforeDragDrop : function(target, e, id){
  98.         return true;
  99.     },
  100.     // private
  101.     onValidDrop : function(target, e, id){
  102.         this.hideProxy();
  103.         if(this.afterValidDrop){
  104.             /**
  105.              * An empty function by default, but provided so that you can perform a custom action
  106.              * after a valid drop has occurred by providing an implementation.
  107.              * @param {Object} target The target DD 
  108.              * @param {Event} e The event object
  109.              * @param {String} id The id of the dropped element
  110.              * @method afterInvalidDrop
  111.              */
  112.             this.afterValidDrop(target, e, id);
  113.         }
  114.     },
  115.     // private
  116.     getRepairXY : function(e, data){
  117.         return this.el.getXY();  
  118.     },
  119.     // private
  120.     onInvalidDrop : function(target, e, id){
  121.         this.beforeInvalidDrop(target, e, id);
  122.         if(this.cachedTarget){
  123.             if(this.cachedTarget.isNotifyTarget){
  124.                 this.cachedTarget.notifyOut(this, e, this.dragData);
  125.             }
  126.             this.cacheTarget = null;
  127.         }
  128.         this.proxy.repair(this.getRepairXY(e, this.dragData), this.afterRepair, this);
  129.         if(this.afterInvalidDrop){
  130.             /**
  131.              * An empty function by default, but provided so that you can perform a custom action
  132.              * after an invalid drop has occurred by providing an implementation.
  133.              * @param {Event} e The event object
  134.              * @param {String} id The id of the dropped element
  135.              * @method afterInvalidDrop
  136.              */
  137.             this.afterInvalidDrop(e, id);
  138.         }
  139.     },
  140.     // private
  141.     afterRepair : function(){
  142.         if(Ext.enableFx){
  143.             this.el.highlight(this.hlColor || "c3daf9");
  144.         }
  145.         this.dragging = false;
  146.     },
  147.     /**
  148.      * An empty function by default, but provided so that you can perform a custom action after an invalid
  149.      * drop has occurred.
  150.      * @param {Ext.dd.DragDrop} target The drop target
  151.      * @param {Event} e The event object
  152.      * @param {String} id The id of the dragged element
  153.      * @return {Boolean} isValid True if the invalid drop should proceed, else false to cancel
  154.      */
  155.     beforeInvalidDrop : function(target, e, id){
  156.         return true;
  157.     },
  158.     // private
  159.     handleMouseDown : function(e){
  160.         if(this.dragging) {
  161.             return;
  162.         }
  163.         var data = this.getDragData(e);
  164.         if(data && this.onBeforeDrag(data, e) !== false){
  165.             this.dragData = data;
  166.             this.proxy.stop();
  167.             Ext.dd.DragSource.superclass.handleMouseDown.apply(this, arguments);
  168.         } 
  169.     },
  170.     /**
  171.      * An empty function by default, but provided so that you can perform a custom action before the initial
  172.      * drag event begins and optionally cancel it.
  173.      * @param {Object} data An object containing arbitrary data to be shared with drop targets
  174.      * @param {Event} e The event object
  175.      * @return {Boolean} isValid True if the drag event is valid, else false to cancel
  176.      */
  177.     onBeforeDrag : function(data, e){
  178.         return true;
  179.     },
  180.     /**
  181.      * An empty function by default, but provided so that you can perform a custom action once the initial
  182.      * drag event has begun.  The drag cannot be canceled from this function.
  183.      * @param {Number} x The x position of the click on the dragged object
  184.      * @param {Number} y The y position of the click on the dragged object
  185.      */
  186.     onStartDrag : Ext.emptyFn,
  187.     // private override
  188.     startDrag : function(x, y){
  189.         this.proxy.reset();
  190.         this.dragging = true;
  191.         this.proxy.update("");
  192.         this.onInitDrag(x, y);
  193.         this.proxy.show();
  194.     },
  195.     // private
  196.     onInitDrag : function(x, y){
  197.         var clone = this.el.dom.cloneNode(true);
  198.         clone.id = Ext.id(); // prevent duplicate ids
  199.         this.proxy.update(clone);
  200.         this.onStartDrag(x, y);
  201.         return true;
  202.     },
  203.     /**
  204.      * Returns the drag source's underlying {@link Ext.dd.StatusProxy}
  205.      * @return {Ext.dd.StatusProxy} proxy The StatusProxy
  206.      */
  207.     getProxy : function(){
  208.         return this.proxy;  
  209.     },
  210.     /**
  211.      * Hides the drag source's {@link Ext.dd.StatusProxy}
  212.      */
  213.     hideProxy : function(){
  214.         this.proxy.hide();  
  215.         this.proxy.reset(true);
  216.         this.dragging = false;
  217.     },
  218.     // private
  219.     triggerCacheRefresh : function(){
  220.         Ext.dd.DDM.refreshCache(this.groups);
  221.     },
  222.     // private - override to prevent hiding
  223.     b4EndDrag: function(e) {
  224.     },
  225.     // private - override to prevent moving
  226.     endDrag : function(e){
  227.         this.onEndDrag(this.dragData, e);
  228.     },
  229.     // private
  230.     onEndDrag : function(data, e){
  231.     },
  232.     
  233.     // private - pin to cursor
  234.     autoOffset : function(x, y) {
  235.         this.setDelta(-12, -20);
  236.     }    
  237. });/**
  238.  * @class Ext.dd.DropTarget
  239.  * @extends Ext.dd.DDTarget
  240.  * A simple class that provides the basic implementation needed to make any element a drop target that can have
  241.  * draggable items dropped onto it.  The drop has no effect until an implementation of notifyDrop is provided.
  242.  * @constructor
  243.  * @param {Mixed} el The container element
  244.  * @param {Object} config
  245.  */
  246. Ext.dd.DropTarget = function(el, config){
  247.     this.el = Ext.get(el);
  248.     
  249.     Ext.apply(this, config);
  250.     
  251.     if(this.containerScroll){
  252.         Ext.dd.ScrollManager.register(this.el);
  253.     }
  254.     
  255.     Ext.dd.DropTarget.superclass.constructor.call(this, this.el.dom, this.ddGroup || this.group, 
  256.           {isTarget: true});
  257. };
  258. Ext.extend(Ext.dd.DropTarget, Ext.dd.DDTarget, {
  259.     /**
  260.      * @cfg {String} ddGroup
  261.      * A named drag drop group to which this object belongs.  If a group is specified, then this object will only
  262.      * interact with other drag drop objects in the same group (defaults to undefined).
  263.      */
  264.     /**
  265.      * @cfg {String} overClass
  266.      * The CSS class applied to the drop target element while the drag source is over it (defaults to "").
  267.      */
  268.     /**
  269.      * @cfg {String} dropAllowed
  270.      * The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
  271.      */
  272.     dropAllowed : "x-dd-drop-ok",
  273.     /**
  274.      * @cfg {String} dropNotAllowed
  275.      * The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
  276.      */
  277.     dropNotAllowed : "x-dd-drop-nodrop",
  278.     // private
  279.     isTarget : true,
  280.     // private
  281.     isNotifyTarget : true,
  282.     /**
  283.      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source is now over the
  284.      * target.  This default implementation adds the CSS class specified by overClass (if any) to the drop element
  285.      * and returns the dropAllowed config value.  This method should be overridden if drop validation is required.
  286.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  287.      * @param {Event} e The event
  288.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  289.      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  290.      * underlying {@link Ext.dd.StatusProxy} can be updated
  291.      */
  292.     notifyEnter : function(dd, e, data){
  293.         if(this.overClass){
  294.             this.el.addClass(this.overClass);
  295.         }
  296.         return this.dropAllowed;
  297.     },
  298.     /**
  299.      * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the target.
  300.      * This method will be called on every mouse movement while the drag source is over the drop target.
  301.      * This default implementation simply returns the dropAllowed config value.
  302.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  303.      * @param {Event} e The event
  304.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  305.      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  306.      * underlying {@link Ext.dd.StatusProxy} can be updated
  307.      */
  308.     notifyOver : function(dd, e, data){
  309.         return this.dropAllowed;
  310.     },
  311.     /**
  312.      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the source has been dragged
  313.      * out of the target without dropping.  This default implementation simply removes the CSS class specified by
  314.      * overClass (if any) from the drop element.
  315.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  316.      * @param {Event} e The event
  317.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  318.      */
  319.     notifyOut : function(dd, e, data){
  320.         if(this.overClass){
  321.             this.el.removeClass(this.overClass);
  322.         }
  323.     },
  324.     /**
  325.      * The function a {@link Ext.dd.DragSource} calls once to notify this drop target that the dragged item has
  326.      * been dropped on it.  This method has no default implementation and returns false, so you must provide an
  327.      * implementation that does something to process the drop event and returns true so that the drag source's
  328.      * repair action does not run.
  329.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  330.      * @param {Event} e The event
  331.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  332.      * @return {Boolean} True if the drop was valid, else false
  333.      */
  334.     notifyDrop : function(dd, e, data){
  335.         return false;
  336.     }
  337. });/**
  338.  * @class Ext.dd.DragZone
  339.  * @extends Ext.dd.DragSource
  340.  * <p>This class provides a container DD instance that allows dragging of multiple child source nodes.</p>
  341.  * <p>This class does not move the drag target nodes, but a proxy element which may contain
  342.  * any DOM structure you wish. The DOM element to show in the proxy is provided by either a
  343.  * provided implementation of {@link #getDragData}, or by registered draggables registered with {@link Ext.dd.Registry}</p>
  344.  * <p>If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some
  345.  * application object (For example nodes in a {@link Ext.DataView DataView}) then use of this class
  346.  * is the most efficient way to "activate" those nodes.</p>
  347.  * <p>By default, this class requires that draggable child nodes are registered with {@link Ext.dd.Registry}.
  348.  * However a simpler way to allow a DragZone to manage any number of draggable elements is to configure
  349.  * the DragZone with  an implementation of the {@link #getDragData} method which interrogates the passed
  350.  * mouse event to see if it has taken place within an element, or class of elements. This is easily done
  351.  * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
  352.  * {@link Ext.DomQuery} selector. For example, to make the nodes of a DataView draggable, use the following
  353.  * technique. Knowledge of the use of the DataView is required:</p><pre><code>
  354. myDataView.on('render', function() {
  355.     myDataView.dragZone = new Ext.dd.DragZone(myDataView.getEl(), {
  356. //      On receipt of a mousedown event, see if it is within a DataView node.
  357. //      Return a drag data object if so.
  358.         getDragData: function(e) {
  359. //          Use the DataView's own itemSelector (a mandatory property) to
  360. //          test if the mousedown is within one of the DataView's nodes.
  361.             var sourceEl = e.getTarget(myDataView.itemSelector, 10);
  362. //          If the mousedown is within a DataView node, clone the node to produce
  363. //          a ddel element for use by the drag proxy. Also add application data
  364. //          to the returned data object.
  365.             if (sourceEl) {
  366.                 d = sourceEl.cloneNode(true);
  367.                 d.id = Ext.id();
  368.                 return {
  369.                     ddel: d,
  370.                     sourceEl: sourceEl,
  371.                     repairXY: Ext.fly(sourceEl).getXY(),
  372.                     sourceStore: myDataView.store,
  373.                     draggedRecord: v.getRecord(sourceEl)
  374.                 }
  375.             }
  376.         },
  377. //      Provide coordinates for the proxy to slide back to on failed drag.
  378. //      This is the original XY coordinates of the draggable element captured
  379. //      in the getDragData method.
  380.         getRepairXY: function() {
  381.             return this.dragData.repairXY;
  382.         }
  383.     });
  384. });</code></pre>
  385.  * See the {@link Ext.dd.DropZone DropZone} documentation for details about building a DropZone which
  386.  * cooperates with this DragZone.
  387.  * @constructor
  388.  * @param {Mixed} el The container element
  389.  * @param {Object} config
  390.  */
  391. Ext.dd.DragZone = function(el, config){
  392.     Ext.dd.DragZone.superclass.constructor.call(this, el, config);
  393.     if(this.containerScroll){
  394.         Ext.dd.ScrollManager.register(this.el);
  395.     }
  396. };
  397. Ext.extend(Ext.dd.DragZone, Ext.dd.DragSource, {
  398.     /**
  399.      * This property contains the data representing the dragged object. This data is set up by the implementation
  400.      * of the {@link #getDragData} method. It must contain a <tt>ddel</tt> property, but can contain
  401.      * any other data according to the application's needs.
  402.      * @type Object
  403.      * @property dragData
  404.      */
  405.     /**
  406.      * @cfg {Boolean} containerScroll True to register this container with the Scrollmanager
  407.      * for auto scrolling during drag operations.
  408.      */
  409.     /**
  410.      * @cfg {String} hlColor The color to use when visually highlighting the drag source in the afterRepair
  411.      * method after a failed drop (defaults to "c3daf9" - light blue)
  412.      */
  413.     /**
  414.      * Called when a mousedown occurs in this container. Looks in {@link Ext.dd.Registry}
  415.      * for a valid target to drag based on the mouse down. Override this method
  416.      * to provide your own lookup logic (e.g. finding a child by class name). Make sure your returned
  417.      * object has a "ddel" attribute (with an HTML Element) for other functions to work.
  418.      * @param {EventObject} e The mouse down event
  419.      * @return {Object} The dragData
  420.      */
  421.     getDragData : function(e){
  422.         return Ext.dd.Registry.getHandleFromEvent(e);
  423.     },
  424.     
  425.     /**
  426.      * Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
  427.      * this.dragData.ddel
  428.      * @param {Number} x The x position of the click on the dragged object
  429.      * @param {Number} y The y position of the click on the dragged object
  430.      * @return {Boolean} true to continue the drag, false to cancel
  431.      */
  432.     onInitDrag : function(x, y){
  433.         this.proxy.update(this.dragData.ddel.cloneNode(true));
  434.         this.onStartDrag(x, y);
  435.         return true;
  436.     },
  437.     
  438.     /**
  439.      * Called after a repair of an invalid drop. By default, highlights this.dragData.ddel 
  440.      */
  441.     afterRepair : function(){
  442.         if(Ext.enableFx){
  443.             Ext.Element.fly(this.dragData.ddel).highlight(this.hlColor || "c3daf9");
  444.         }
  445.         this.dragging = false;
  446.     },
  447.     /**
  448.      * Called before a repair of an invalid drop to get the XY to animate to. By default returns
  449.      * the XY of this.dragData.ddel
  450.      * @param {EventObject} e The mouse up event
  451.      * @return {Array} The xy location (e.g. [100, 200])
  452.      */
  453.     getRepairXY : function(e){
  454.         return Ext.Element.fly(this.dragData.ddel).getXY();  
  455.     }
  456. });/**
  457.  * @class Ext.dd.DropZone
  458.  * @extends Ext.dd.DropTarget
  459.  * <p>This class provides a container DD instance that allows dropping on multiple child target nodes.</p>
  460.  * <p>By default, this class requires that child nodes accepting drop are registered with {@link Ext.dd.Registry}.
  461.  * However a simpler way to allow a DropZone to manage any number of target elements is to configure the
  462.  * DropZone with an implementation of {@link #getTargetFromEvent} which interrogates the passed
  463.  * mouse event to see if it has taken place within an element, or class of elements. This is easily done
  464.  * by using the event's {@link Ext.EventObject#getTarget getTarget} method to identify a node based on a
  465.  * {@link Ext.DomQuery} selector.</p>
  466.  * <p>Once the DropZone has detected through calling getTargetFromEvent, that the mouse is over
  467.  * a drop target, that target is passed as the first parameter to {@link #onNodeEnter}, {@link #onNodeOver},
  468.  * {@link #onNodeOut}, {@link #onNodeDrop}. You may configure the instance of DropZone with implementations
  469.  * of these methods to provide application-specific behaviour for these events to update both
  470.  * application state, and UI state.</p>
  471.  * <p>For example to make a GridPanel a cooperating target with the example illustrated in
  472.  * {@link Ext.dd.DragZone DragZone}, the following technique might be used:</p><pre><code>
  473. myGridPanel.on('render', function() {
  474.     myGridPanel.dropZone = new Ext.dd.DropZone(myGridPanel.getView().scroller, {
  475. //      If the mouse is over a grid row, return that node. This is
  476. //      provided as the "target" parameter in all "onNodeXXXX" node event handling functions
  477.         getTargetFromEvent: function(e) {
  478.             return e.getTarget(myGridPanel.getView().rowSelector);
  479.         },
  480. //      On entry into a target node, highlight that node.
  481.         onNodeEnter : function(target, dd, e, data){ 
  482.             Ext.fly(target).addClass('my-row-highlight-class');
  483.         },
  484. //      On exit from a target node, unhighlight that node.
  485.         onNodeOut : function(target, dd, e, data){ 
  486.             Ext.fly(target).removeClass('my-row-highlight-class');
  487.         },
  488. //      While over a target node, return the default drop allowed class which
  489. //      places a "tick" icon into the drag proxy.
  490.         onNodeOver : function(target, dd, e, data){ 
  491.             return Ext.dd.DropZone.prototype.dropAllowed;
  492.         },
  493. //      On node drop we can interrogate the target to find the underlying
  494. //      application object that is the real target of the dragged data.
  495. //      In this case, it is a Record in the GridPanel's Store.
  496. //      We can use the data set up by the DragZone's getDragData method to read
  497. //      any data we decided to attach in the DragZone's getDragData method.
  498.         onNodeDrop : function(target, dd, e, data){
  499.             var rowIndex = myGridPanel.getView().findRowIndex(target);
  500.             var r = myGridPanel.getStore().getAt(rowIndex);
  501.             Ext.Msg.alert('Drop gesture', 'Dropped Record id ' + data.draggedRecord.id +
  502.                 ' on Record id ' + r.id);
  503.             return true;
  504.         }
  505.     });
  506. }
  507. </code></pre>
  508.  * See the {@link Ext.dd.DragZone DragZone} documentation for details about building a DragZone which
  509.  * cooperates with this DropZone.
  510.  * @constructor
  511.  * @param {Mixed} el The container element
  512.  * @param {Object} config
  513.  */
  514. Ext.dd.DropZone = function(el, config){
  515.     Ext.dd.DropZone.superclass.constructor.call(this, el, config);
  516. };
  517. Ext.extend(Ext.dd.DropZone, Ext.dd.DropTarget, {
  518.     /**
  519.      * Returns a custom data object associated with the DOM node that is the target of the event.  By default
  520.      * this looks up the event target in the {@link Ext.dd.Registry}, although you can override this method to
  521.      * provide your own custom lookup.
  522.      * @param {Event} e The event
  523.      * @return {Object} data The custom data
  524.      */
  525.     getTargetFromEvent : function(e){
  526.         return Ext.dd.Registry.getTargetFromEvent(e);
  527.     },
  528.     /**
  529.      * Called when the DropZone determines that a {@link Ext.dd.DragSource} has entered a drop node
  530.      * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
  531.      * This method has no default implementation and should be overridden to provide
  532.      * node-specific processing if necessary.
  533.      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from 
  534.      * {@link #getTargetFromEvent} for this node)
  535.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  536.      * @param {Event} e The event
  537.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  538.      */
  539.     onNodeEnter : function(n, dd, e, data){
  540.         
  541.     },
  542.     /**
  543.      * Called while the DropZone determines that a {@link Ext.dd.DragSource} is over a drop node
  544.      * that has either been registered or detected by a configured implementation of {@link #getTargetFromEvent}.
  545.      * The default implementation returns this.dropNotAllowed, so it should be
  546.      * overridden to provide the proper feedback.
  547.      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  548.      * {@link #getTargetFromEvent} for this node)
  549.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  550.      * @param {Event} e The event
  551.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  552.      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  553.      * underlying {@link Ext.dd.StatusProxy} can be updated
  554.      */
  555.     onNodeOver : function(n, dd, e, data){
  556.         return this.dropAllowed;
  557.     },
  558.     /**
  559.      * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dragged out of
  560.      * the drop node without dropping.  This method has no default implementation and should be overridden to provide
  561.      * node-specific processing if necessary.
  562.      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  563.      * {@link #getTargetFromEvent} for this node)
  564.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  565.      * @param {Event} e The event
  566.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  567.      */
  568.     onNodeOut : function(n, dd, e, data){
  569.         
  570.     },
  571.     /**
  572.      * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped onto
  573.      * the drop node.  The default implementation returns false, so it should be overridden to provide the
  574.      * appropriate processing of the drop event and return true so that the drag source's repair action does not run.
  575.      * @param {Object} nodeData The custom data associated with the drop node (this is the same value returned from
  576.      * {@link #getTargetFromEvent} for this node)
  577.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  578.      * @param {Event} e The event
  579.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  580.      * @return {Boolean} True if the drop was valid, else false
  581.      */
  582.     onNodeDrop : function(n, dd, e, data){
  583.         return false;
  584.     },
  585.     /**
  586.      * Called while the DropZone determines that a {@link Ext.dd.DragSource} is being dragged over it,
  587.      * but not over any of its registered drop nodes.  The default implementation returns this.dropNotAllowed, so
  588.      * it should be overridden to provide the proper feedback if necessary.
  589.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  590.      * @param {Event} e The event
  591.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  592.      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  593.      * underlying {@link Ext.dd.StatusProxy} can be updated
  594.      */
  595.     onContainerOver : function(dd, e, data){
  596.         return this.dropNotAllowed;
  597.     },
  598.     /**
  599.      * Called when the DropZone determines that a {@link Ext.dd.DragSource} has been dropped on it,
  600.      * but not on any of its registered drop nodes.  The default implementation returns false, so it should be
  601.      * overridden to provide the appropriate processing of the drop event if you need the drop zone itself to
  602.      * be able to accept drops.  It should return true when valid so that the drag source's repair action does not run.
  603.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  604.      * @param {Event} e The event
  605.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  606.      * @return {Boolean} True if the drop was valid, else false
  607.      */
  608.     onContainerDrop : function(dd, e, data){
  609.         return false;
  610.     },
  611.     /**
  612.      * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source is now over
  613.      * the zone.  The default implementation returns this.dropNotAllowed and expects that only registered drop
  614.      * nodes can process drag drop operations, so if you need the drop zone itself to be able to process drops
  615.      * you should override this method and provide a custom implementation.
  616.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  617.      * @param {Event} e The event
  618.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  619.      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  620.      * underlying {@link Ext.dd.StatusProxy} can be updated
  621.      */
  622.     notifyEnter : function(dd, e, data){
  623.         return this.dropNotAllowed;
  624.     },
  625.     /**
  626.      * The function a {@link Ext.dd.DragSource} calls continuously while it is being dragged over the drop zone.
  627.      * This method will be called on every mouse movement while the drag source is over the drop zone.
  628.      * It will call {@link #onNodeOver} while the drag source is over a registered node, and will also automatically
  629.      * delegate to the appropriate node-specific methods as necessary when the drag source enters and exits
  630.      * registered nodes ({@link #onNodeEnter}, {@link #onNodeOut}). If the drag source is not currently over a
  631.      * registered node, it will call {@link #onContainerOver}.
  632.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  633.      * @param {Event} e The event
  634.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  635.      * @return {String} status The CSS class that communicates the drop status back to the source so that the
  636.      * underlying {@link Ext.dd.StatusProxy} can be updated
  637.      */
  638.     notifyOver : function(dd, e, data){
  639.         var n = this.getTargetFromEvent(e);
  640.         if(!n){ // not over valid drop target
  641.             if(this.lastOverNode){
  642.                 this.onNodeOut(this.lastOverNode, dd, e, data);
  643.                 this.lastOverNode = null;
  644.             }
  645.             return this.onContainerOver(dd, e, data);
  646.         }
  647.         if(this.lastOverNode != n){
  648.             if(this.lastOverNode){
  649.                 this.onNodeOut(this.lastOverNode, dd, e, data);
  650.             }
  651.             this.onNodeEnter(n, dd, e, data);
  652.             this.lastOverNode = n;
  653.         }
  654.         return this.onNodeOver(n, dd, e, data);
  655.     },
  656.     /**
  657.      * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the source has been dragged
  658.      * out of the zone without dropping.  If the drag source is currently over a registered node, the notification
  659.      * will be delegated to {@link #onNodeOut} for node-specific handling, otherwise it will be ignored.
  660.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop target
  661.      * @param {Event} e The event
  662.      * @param {Object} data An object containing arbitrary data supplied by the drag zone
  663.      */
  664.     notifyOut : function(dd, e, data){
  665.         if(this.lastOverNode){
  666.             this.onNodeOut(this.lastOverNode, dd, e, data);
  667.             this.lastOverNode = null;
  668.         }
  669.     },
  670.     /**
  671.      * The function a {@link Ext.dd.DragSource} calls once to notify this drop zone that the dragged item has
  672.      * been dropped on it.  The drag zone will look up the target node based on the event passed in, and if there
  673.      * is a node registered for that event, it will delegate to {@link #onNodeDrop} for node-specific handling,
  674.      * otherwise it will call {@link #onContainerDrop}.
  675.      * @param {Ext.dd.DragSource} source The drag source that was dragged over this drop zone
  676.      * @param {Event} e The event
  677.      * @param {Object} data An object containing arbitrary data supplied by the drag source
  678.      * @return {Boolean} True if the drop was valid, else false
  679.      */
  680.     notifyDrop : function(dd, e, data){
  681.         if(this.lastOverNode){
  682.             this.onNodeOut(this.lastOverNode, dd, e, data);
  683.             this.lastOverNode = null;
  684.         }
  685.         var n = this.getTargetFromEvent(e);
  686.         return n ?
  687.             this.onNodeDrop(n, dd, e, data) :
  688.             this.onContainerDrop(dd, e, data);
  689.     },
  690.     // private
  691.     triggerCacheRefresh : function(){
  692.         Ext.dd.DDM.refreshCache(this.groups);
  693.     }  
  694. });/**
  695.  * @class Ext.Element
  696.  */
  697. Ext.Element.addMethods({
  698.     /**
  699.      * Initializes a {@link Ext.dd.DD} drag drop object for this element.
  700.      * @param {String} group The group the DD object is member of
  701.      * @param {Object} config The DD config object
  702.      * @param {Object} overrides An object containing methods to override/implement on the DD object
  703.      * @return {Ext.dd.DD} The DD object
  704.      */
  705.     initDD : function(group, config, overrides){
  706.         var dd = new Ext.dd.DD(Ext.id(this.dom), group, config);
  707.         return Ext.apply(dd, overrides);
  708.     },
  709.     /**
  710.      * Initializes a {@link Ext.dd.DDProxy} object for this element.
  711.      * @param {String} group The group the DDProxy object is member of
  712.      * @param {Object} config The DDProxy config object
  713.      * @param {Object} overrides An object containing methods to override/implement on the DDProxy object
  714.      * @return {Ext.dd.DDProxy} The DDProxy object
  715.      */
  716.     initDDProxy : function(group, config, overrides){
  717.         var dd = new Ext.dd.DDProxy(Ext.id(this.dom), group, config);
  718.         return Ext.apply(dd, overrides);
  719.     },
  720.     /**
  721.      * Initializes a {@link Ext.dd.DDTarget} object for this element.
  722.      * @param {String} group The group the DDTarget object is member of
  723.      * @param {Object} config The DDTarget config object
  724.      * @param {Object} overrides An object containing methods to override/implement on the DDTarget object
  725.      * @return {Ext.dd.DDTarget} The DDTarget object
  726.      */
  727.     initDDTarget : function(group, config, overrides){
  728.         var dd = new Ext.dd.DDTarget(Ext.id(this.dom), group, config);
  729.         return Ext.apply(dd, overrides);
  730.     }
  731. });