Clear Up
SharpKit Reference

DragDropManager Class

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.

Namespace: Ext.dd

Base Types

Methods

Name Description
callOverridden(object) Call the original method that was previously overridden with override
  Ext.define('My.Cat', {
            constructor: function() {
            alert("I'm a cat!");
            }
            });
            My.Cat.override({
            constructor: function() {
            alert("I'm going to be a cat!");
            this.callOverridden();
            alert("Meeeeoooowwww");
            }
            });
            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
            // alerts "I'm a cat!"
            // alerts "Meeeeoooowwww"
            

This method has been deprecated

as of 4.1. Use callParent instead.

callParent(object) Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
  Ext.define('My.Base', {
            constructor: function (x) {
            this.x = x;
            },
            statics: {
            method: function (x) {
            return x;
            }
            }
            });
            Ext.define('My.Derived', {
            extend: 'My.Base',
            constructor: function () {
            this.callParent([21]);
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // alerts 21
            
This can be used with an override as follows:
  Ext.define('My.DerivedOverride', {
            override: 'My.Derived',
            constructor: function (x) {
            this.callParent([x*2]); // calls original My.Derived constructor
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // now alerts 42
            
This also works with static methods.
  Ext.define('My.Derived2', {
            extend: 'My.Base',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Base.method
            }
            }
            });
            alert(My.Base.method(10);     // alerts 10
            alert(My.Derived2.method(10); // alerts 20
            
Lastly, it also works with overridden static methods.
  Ext.define('My.Derived2Override', {
            override: 'My.Derived2',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Derived2.method
            }
            }
            });
            alert(My.Derived2.method(10); // now alerts 40
            
getBestMatch(JsArray<T>) Helper function for getting the best match from the list of drag and drop objects returned by the drag and drop events when we are in INTERSECT mode. It returns either the first object that the cursor is over, or the object that has the greatest overlap with the dragged element.
getCss(JsString) Returns the style property for the DOM element (i.e., document.getElById(id).style)
getDDById(JsString) Returns the DragDrop instance for a given id
getElement(JsString) Returns the actual DOM element

This method has been deprecated

use Ext.lib.Ext.getDom instead

getInitialConfig(object) Returns the initial configuration passed to constructor when instantiating this class.
getLocation(DragDrop) Returns a Region object containing the drag and drop element's position and size, including the padding configured for it
getRelated(DragDrop, bool) Returns the drag and drop instances that are in all groups the passed in instance belongs to.
initConfig(object) Initialize configuration for this class. a typical example:
  Ext.define('My.awesome.Class', {
            // The default config
            config: {
            name: 'Awesome',
            isAwesome: true
            },
            constructor: function(config) {
            this.initConfig(config);
            }
            });
            var awesome = new My.awesome.Class({
            name: 'Super Awesome'
            });
            alert(awesome.getName()); // 'Super Awesome'
            
isDragDrop(JsString) Utility function to determine if a given element has been registered as a drag drop item.
isHandle(JsString) Utility function to determine if a given element has been registered as a drag drop handle for the given Drag Drop object.
isLegalTarget(DragDrop, DragDrop) Returns true if the specified dd target is a legal target for the specifice drag obj
isLocked() Is drag and drop locked?
isTypeOfDD(object) My goal is to be able to transparently determine if an object is typeof DragDrop, and the exact subclass of DragDrop. typeof returns "object", oDD.constructor.toString() always returns "DragDrop" and not the name of the subclass. So for now it just evaluates a well-known variable in DragDrop.
lock() Lock all drag and drop functionality
refreshCache(object) Refreshes the cache of the top-left and bottom-right points of the drag and drop objects in the specified group(s). This is in the format that is stored in the drag and drop instance, so typical usage is:
  Ext.dd.DragDropManager.refreshCache(ddinstance.groups);
            
Alternatively:
  Ext.dd.DragDropManager.refreshCache({group1:true, group2:true});
            
@TODO this really should be an indexed array. Alternatively this method could accept both.
regDragDrop(DragDrop, JsString) Each DragDrop instance must be registered with the DragDropManager. This is executed in DragDrop.init()
regHandle(JsString, JsString) Each DragDrop handle element must be registered. This is done automatically when executing DragDrop.setHandleElId()
startDrag(JsNumber, JsNumber) Fired when either the drag pixel threshol or the mousedown hold time threshold has been met.
statics() Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time
  Ext.define('My.Cat', {
            statics: {
            totalCreated: 0,
            speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
            },
            constructor: function() {
            var statics = this.statics();
            alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
            // equivalent to: My.Cat.speciesName
            alert(this.self.speciesName);   // dependent on 'this'
            statics.totalCreated++;
            },
            clone: function() {
            var cloned = new this.self;                      // dependent on 'this'
            cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
            return cloned;
            }
            });
            Ext.define('My.SnowLeopard', {
            extend: 'My.Cat',
            statics: {
            speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
            },
            constructor: function() {
            this.callParent();
            }
            });
            var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
            var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
            var clone = snowLeopard.clone();
            alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
            alert(clone.groupName);                 // alerts 'Cat'
            alert(My.Cat.totalCreated);             // alerts 3
            
stopEvent(object) Utility to stop event propagation and event default, if these features are turned on.
unlock() Unlock all drag and drop functionality
verifyEl(object) This checks to make sure an element exists and is in the DOM. The main purpose is to handle cases where innerHTML is used to remove drag and drop objects from the DOM. IE provides an 'unspecified error' when trying to access the offsetParent of such an element

Properties

Name Description
clickPixelThresh The number of pixels that the mouse needs to move after the mousedown before the drag is initiated. Default=3; Defaults to: 3
clickTimeThresh The number of milliseconds after the mousedown event to initiate the drag if we don't get a mouseup event. Default=350 Defaults to: 350
INTERSECT In intersect mode, drag and drop interaction is defined by the overlap of two or more drag and drop objects. Defaults to: 1
mode The current drag and drop mode. Default: POINT Defaults to: 0
notifyOccluded This config is only provided to provide old, usually unwanted drag/drop behaviour. From ExtJS 4.1.0 onwards, when drop targets are contained in floating, absolutely positioned elements such as in Windows, which may overlap each other, over and drop events are only delivered to the topmost drop target at the mouse position. If all targets below that in zIndex order should also receive notifications, set notifyOccluded to true. Defaults to: false
POINT In point mode, drag and drop interaction is defined by the location of the cursor during the drag/drop Defaults to: 0
preventDefault Flag to determine if we should prevent the default behavior of the events we define. By default this is true, but this can be set to false if you need the default behavior (not recommended) Defaults to: true
stopPropagation Flag to determine if we should stop the propagation of the events we generate. This is true by default but you may want to set it to false if the html element contains other features that require the mouse click. Defaults to: true
useCache Set useCache to false if you want to force object the lookup of each drag and drop linked element constantly during a drag. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.