X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/2e847cf21b8ab9d15fa167b315ca5b2fa92638fc..e9397f91ede62d446aed37d23256e8938fc4c335:/docs/output/Ext.dd.DropZone.html?ds=inline diff --git a/docs/output/Ext.dd.DropZone.html b/docs/output/Ext.dd.DropZone.html index 18b46a24..7d640f3e 100644 --- a/docs/output/Ext.dd.DropZone.html +++ b/docs/output/Ext.dd.DropZone.html @@ -1,64 +1,62 @@ -
DragDrop
  DDTarget
    DropTarget
      DropZone

Class Ext.dd.DropZone

Package:Ext.dd
Defined In:DropZone.js
Class:DropZone
Subclasses:TreeDropZone
Extends:DropTarget

This class provides a container DD instance that allows dropping on multiple child target nodes.

-

By default, this class requires that child nodes accepting drop are registered with 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 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 getTarget method to identify a node based on a -Ext.DomQuery selector.

-

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 onNodeEnter, onNodeOver, -onNodeOut, 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.

-

For example to make a GridPanel a cooperating target with the example illustrated in -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).addClass('my-row-highlight-class');
-        },
-
-//      On exit from a target node, unhighlight that node.

-        onNodeOut : function(target, dd, e, data){ 
-            Ext.fly(target).removeClass('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 DragZone documentation for details about building a DragZone which -cooperates with this DropZone.

Config Options

Config OptionsDefined By
 dropAllowed : String
The CSS class returned to the drag source when drop is allowed (defaults to "x-dd-drop-ok").
DropTarget
 dropNotAllowed : String
The CSS class returned to the drag source when drop is not allowed (defaults to "x-dd-drop-nodrop").
DropTarget
 overClass : String
The CSS class applied to the drop target element while the drag source is over it (defaults to "").
DropTarget

Public Properties

PropertyDefined By
 available : boolean
The availabe property is false until the linked dom element is accessible.
DragDrop
 config : object
Configuration attributes passed into the constructor
DragDrop
 defaultPadding : Object
Provides default constraint padding to "constrainTo" elements (defaults to {left: 0, right:0, top:0, bottom:0}).
DragDrop