Ext.dd Namespace

Classes

	Name	Description
	DD	A DragDrop implementation where the linked element follows the mouse cursor during a drag.
	DDConfig
	DDEvents
	DDProxy	A DragDrop implementation that inserts an empty, bordered div into the document that follows the cursor during drag operations. At the time of the click, the frame div is resized to the dimensions of the linked html element, and moved to the exact location of the linked element. References to the "frame" element refer to the single proxy element that was created to be dragged in place of all DDProxy elements on the page.
	DDProxyConfig
	DDProxyEvents
	DDTarget	A DragDrop implementation that does not move, but can be a drop target. You would get the same result by simply omitting implementation for the event callbacks, but this way we reduce the processing cost of the event listener and the callbacks.
	DDTargetConfig
	DDTargetEvents
	DragDrop	Defines the interface and base operation of items that that can be dragged or can be drop targets. It was designed to be extended, overriding the event handlers for startDrag, onDrag, onDragOver and onDragOut. Up to three html elements can be associated with a DragDrop instance: linked element: the element that is passed into the constructor. This is the element which defines the boundaries for interaction with other DragDrop objects. handle element(s): The drag operation only occurs if the element that was clicked matches a handle element. By default this is the linked element, but there are times that you will want only a portion of the linked element to initiate the drag operation, and the setHandleElId() method provides a way to define this. drag element: this represents the element that would be moved along with the cursor during a drag operation. By default, this is the linked element itself as in Ext.dd.DD. setDragElId() lets you define a separate element that would be moved, as in Ext.dd.DDProxy. This class should not be instantiated until the onload event to ensure that the associated elements are available. The following would define a DragDrop obj that would interact with any other DragDrop obj in the "group1" group: dd = new Ext.dd.DragDrop("div1", "group1"); Since none of the event handlers have been implemented, nothing would actually happen if you were to run the code above. Normally you would override this class or one of the default implementations, but you can also override the methods you want on an instance of the class... dd.onDragDrop = function(e, id) { alert("dd was dropped on " + id); }
	DragDropConfig
	DragDropEvents
	DragDropManager	DragDropManager is a singleton that tracks the element interaction for all DragDrop items in the window. Generally, you will not call this class directly, but it does have helper methods that could be useful in your DragDrop implementations.
	DragDropManagerConfig
	DragDropManagerEvents
	DragSource	A simple class that provides the basic implementation needed to make any element draggable.
	DragSourceConfig
	DragSourceEvents
	DragTracker	A DragTracker listens for drag events on an Element and fires events at the start and end of the drag, as well as during the drag. This is useful for components such as Ext.slider.Multi, where there is an element that can be dragged around to change the Slider's value. DragTracker provides a series of template methods that should be overridden to provide functionality in response to detected drag operations. These are onBeforeStart, onStart, onDrag and onEnd. See Ext.slider.Multi's initEvents function for an example implementation.
	DragTrackerConfig
	DragTrackerEvents
	DragZone	This class provides a container DD instance that allows dragging of multiple child source nodes. This class does not move the drag target nodes, but a proxy element which may contain any DOM structure you wish. The DOM element to show in the proxy is provided by either a provided implementation of getDragData, or by registered draggables registered with Ext.dd.Registry If you wish to provide draggability for an arbitrary number of DOM nodes, each of which represent some application object (For example nodes in a DataView) then use of this class is the most efficient way to "activate" those nodes. By default, this class requires that draggable child nodes are registered with Ext.dd.Registry. However a simpler way to allow a DragZone to manage any number of draggable elements is to configure the DragZone with an implementation of the getDragData method 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. For example, to make the nodes of a DataView draggable, use the following technique. Knowledge of the use of the DataView is required: myDataView.on('render', function(v) { myDataView.dragZone = new Ext.dd.DragZone(v.getEl(), { // On receipt of a mousedown event, see if it is within a DataView node. // Return a drag data object if so. getDragData: function(e) { // Use the DataView's own itemSelector (a mandatory property) to // test if the mousedown is within one of the DataView's nodes. var sourceEl = e.getTarget(v.itemSelector, 10); // If the mousedown is within a DataView node, clone the node to produce // a ddel element for use by the drag proxy. Also add application data // to the returned data object. if (sourceEl) { d = sourceEl.cloneNode(true); d.id = Ext.id(); return { ddel: d, sourceEl: sourceEl, repairXY: Ext.fly(sourceEl).getXY(), sourceStore: v.store, draggedRecord: v.getRecord(sourceEl) } } }, // Provide coordinates for the proxy to slide back to on failed drag. // This is the original XY coordinates of the draggable element captured // in the getDragData method. getRepairXY: function() { return this.dragData.repairXY; } }); }); See the DropZone documentation for details about building a DropZone which cooperates with this DragZone.
	DragZoneConfig
	DragZoneEvents
	DropTarget	A simple class that provides the basic implementation needed to make any element a drop target that can have draggable items dropped onto it. The drop has no effect until an implementation of notifyDrop is provided.
	DropTargetConfig
	DropTargetEvents
	DropZone	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).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 DragZone documentation for details about building a DragZone which cooperates with this DropZone.
	DropZoneConfig
	DropZoneEvents
	Registry	Provides easy access to all drag drop components that are registered on a page. Items can be retrieved either directly by DOM node id, or by passing in the drag drop event that occurred and looking up the event target.
	RegistryConfig
	RegistryEvents
	ScrollManager	Provides automatic scrolling of overflow regions in the page during drag operations. The ScrollManager configs will be used as the defaults for any scroll container registered with it, but you can also override most of the configs per scroll container by adding a ddScrollConfig object to the target element that contains these properties: hthresh, vthresh, increment and frequency. Example usage: var el = Ext.get('scroll-ct'); el.ddScrollConfig = { vthresh: 50, hthresh: -1, frequency: 100, increment: 200 }; Ext.dd.ScrollManager.register(el); Note: This class uses "Point Mode" and is untested in "Intersect Mode".
	ScrollManagerConfig
	ScrollManagerEvents
	StatusProxy	A specialized drag proxy that supports a drop status icon, Ext.Layer styles and auto-repair. This is the default drag proxy used by all Ext.dd components.
	StatusProxyConfig
	StatusProxyEvents