Ext.dd.DD

Internal typeof flag

Defaults to: true

Available since: 1.1.0

Cached reference to the linked element

Available since: 1.1.0

The available property is false until the linked dom element is accessible.

Defaults to: false

Available since: 1.1.0

Configuration attributes passed into the constructor

Available since: 1.1.0

Defaults to: {}

Available since: 4.1.1

Set to true when horizontal contraints are applied

Defaults to: false

Available since: 1.1.0

Set to true when vertical contraints are applied

Defaults to: false

Available since: 1.1.0

Provides default constraint padding to "constrainTo" elements.

Defaults to: {left: 0, right: 0, top: 0, bottom: 0}

Available since: 2.3.0

The id of the element that will be dragged. By default this is same as the linked element, but could be changed to another element. Ex: Ext.dd.DDProxy

Available since: 1.1.0

The group defines a logical collection of DragDrop objects that are related. Instances only get events when interacting with other DragDrop object in the same group. This lets us define multiple groups using a single DragDrop subclass if we want.

An object in the format {'group1':true, 'group2':true}

Available since: 1.1.0

The ID of the element that initiates the drag operation. By default this is the linked element, but could be changed to be a child of this element. This lets us do things like only starting the drag when the header element within the linked html element is clicked.

Available since: 1.1.0

By default, drags can only be initiated if the mousedown occurs in the region the linked element is. This is done in part to work around a bug in some browsers that mis-report the mousedown if the previous mouseup happened outside of the window. This property is set to true if outer handles are defined. Defaults to false.

Defaults to: false

Available since: 1.1.0

The id of the element associated with this object. This is what we refer to as the "linked element" because the size and position of this element is used to determine when the drag and drop objects have interacted.

Available since: 1.1.0

Set to false to enable a DragDrop object to fire drag events while dragging over its own Element. Defaults to true - DragDrop objects do not by default fire drag events to themselves.

Available since: 3.4.0

Defaults to: []

Available since: 4.1.1

Defaults to: {}

Available since: 4.1.1

An Array of CSS class names for elements to be considered in valid as drag handles.

Available since: 1.1.0

An object who's property names identify the IDs of elements to be considered invalid as drag handles. A non-null property value identifies the ID as invalid. For example, to prevent dragging from being initiated on element ID "foo", use:

{
    foo: true
}

Available since: 1.1.0

An object who's property names identify HTML tags to be considered invalid as drag handles. A non-null property value identifies the tag as invalid. Defaults to the following value which prevents drag operations from being initiated by <a> elements:

{
    A: "A"
}

Available since: 1.1.0

Defaults to: true

Available since: 4.1.1

By default, all instances can be a drop target. This can be disabled by setting isTarget to false.

Defaults to: true

Available since: 1.1.0

Individual drag/drop instances can be locked. This will prevent onmousedown start drag.

Defaults to: false

Available since: 1.1.0

Maintain offsets when we resetconstraints. Set to true when you want the position of the element relative to its parent to stay the same when the page changes

Defaults to: false

Available since: 1.1.0

The right constraint

Defaults to: 0

Available since: 1.1.0

The down constraint

Defaults to: 0

Available since: 1.1.0

The left constraint

Defaults to: 0

Available since: 1.1.0

The up constraint

Defaults to: 0

Available since: 1.1.0

When set to true, other DD objects in cooperating DDGroups do not receive notification events when this DD object is dragged over them.

Defaults to: false

Available since: 2.3.0

The padding configured for this drag and drop object for calculating the drop zone intersection with this object. An array containing the 4 padding values: [top, right, bottom, left]

Available since: 1.1.0

By default the drag and drop instance will only respond to the primary button click (left button for a right-handed mouse). Set to true to allow drag and drop to start with any mouse click that is propogated by the browser

Defaults to: true

Available since: 1.1.0

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); // dependent on 'this'
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

The linked element's absolute X position at the time the drag was started

Defaults to: 0

Available since: 1.1.0

The linked element's absolute X position at the time the drag was started

Defaults to: 0

Available since: 1.1.0

Array of pixel locations the element will snap to if we specified a horizontal graduation/interval. This array is generated automatically when you define a tick interval.

Available since: 1.1.0

Array of pixel locations the element will snap to if we specified a vertical graduation/interval. This array is generated automatically when you define a tick interval.

Available since: 1.1.0

Lets you specify a css class of elements that will not initiate a drag

Available since: 1.1.0

Parameters

• cssClass : String

  the class of the elements you wish to ignore

Lets you to specify an element id for a child of a drag handle that should not initiate a drag

Available since: 1.1.0

Parameters

• id : String

  the element id of the element you wish to ignore

Allows you to specify a tag name that should not start a drag operation when clicked. This is designed to facilitate embedding links within a drag handle that do something other than start the drag.

Available since: 1.1.0

Parameters

• tagName : String

  the type of element to exclude

Adds this instance to a group of related drag/drop objects. All instances belong to at least one group, and can belong to as many groups as needed.

Available since: 1.1.0

Parameters

• sGroup : String

  the name of the group

Code that executes immediately before the onDragDrop event

Available since: 1.1.0

Parameters

• e : Object

Code that executes immediately before the onDragOut event

Available since: 1.1.0

Parameters

• e : Object

Code that executes immediately before the onDragOver event

Available since: 1.1.0

Parameters

• e : Object

Code that executes immediately before the endDrag event

Available since: 1.1.0

Parameters

• e : Object

Code that executes immediately before the startDrag event

Available since: 1.1.0

Parameters

• x : Object
• y : 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"

Available since: 4.0.0

Parameters

• args : Array/Arguments

  The arguments, either an array or the arguments object from the current method, for example: this.callOverridden(arguments)

Returns

• Object

  Returns the result of calling the overridden method

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

To override a method and replace it and also call the superclass method, use callSuper. This is often done to patch a method to fix a bug.

Available since: 4.0.0

Parameters

• args : Array/Arguments

  The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

Returns

• Object

  Returns the result of calling the parent method

This method is used by an override to call the superclass method but bypass any overridden method. This is often done to "patch" a method that contains a bug but for whatever reason cannot be fixed directly.

Consider:

 Ext.define('Ext.some.Class', {
     method: function () {
         console.log('Good');
     }
 });

 Ext.define('Ext.some.DerivedClass', {
     method: function () {
         console.log('Bad');

         // ... logic but with a bug ...

         this.callParent();
     }
 });

To patch the bug in DerivedClass.method, the typical solution is to create an override:

 Ext.define('App.paches.DerivedClass', {
     override: 'Ext.some.DerivedClass',

     method: function () {
         console.log('Fixed');

         // ... logic but with bug fixed ...

         this.callSuper();
     }
 });

The patch method cannot use callParent to call the superclass method since that would call the overridden method containing the bug. In other words, the above patch would only produce "Fixed" then "Good" in the console log, whereas, using callParent would produce "Fixed" then "Bad" then "Good".

Available since: Ext JS 4.1.3

Parameters

• args : Array/Arguments

  The arguments, either an array or the arguments object from the current method, for example: this.callSuper(arguments)

Returns

• Object

  Returns the result of calling the superclass method

Clears any constraints applied to this instance. Also clears ticks since they can't exist independent of a constraint at this time.

Available since: 1.1.0

Clears any tick interval defined for this instance

Available since: 1.1.0

Available since: 4.0.0

Parameters

• e : Object

Available since: 4.1.1

Initializes the drag drop object's constraints to restrict movement to a certain element.

Usage:

var dd = new Ext.dd.DDProxy("dragDiv1", "proxytest",
               { dragElId: "existingProxyDiv" });
dd.startDrag = function(){
    this.constrainTo("parent-id");
};

Or you can initalize it using the Ext.Element object:

Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
    startDrag : function(){
        this.constrainTo("parent-id");
    }
});

Available since: 2.3.0

Parameters

• constrainTo : String/HTMLElement/Ext.Element

  The element or element ID to constrain to.

• pad : Object/Number (optional)

  Pad provides a way to specify "padding" of the constraints, and can be either a number for symmetrical padding (4 would be equal to {left:4, right:4, top:4, bottom:4}) or an object containing the sides to pad. For example: {right:10, bottom:10}

• inContent : Boolean (optional)

  Constrain the draggable in the content box of the element (inside padding and borders)

Available since: 4.0.0

Overrides: Ext.Base.destroy

Called when we are done dragging the object

Available since: 1.1.0

Parameters

• e : Event

  the mouseup event

Available since: 4.1.0

Parameters

• name : Object

Returns a reference to the actual element to drag. By default this is the same as the html element, but it can be assigned to another element. An example of this can be found in Ext.dd.DDProxy

Available since: 1.1.0

Returns

• HTMLElement

  the html element

Returns a reference to the linked element

Available since: 1.1.0

Returns

• HTMLElement

  the html element

Returns the initial configuration passed to constructor when instantiating this class.

Available since: 4.1.0

Parameters

• name : String (optional)

  Name of the config option to return.

Returns

• Object/Mixed

  The full config object or a single config value when name parameter specified.

Normally the drag element is moved pixel by pixel, but we can specify that it move a number of pixels at a time. This method resolves the location when we have it set up like this.

Available since: 1.1.0

Parameters

• val : Number

  where we want to place the object

• tickArray : Number[]

  sorted array of valid points

Returns

• Number

  the closest tick

Called when this object is clicked

Available since: 1.1.0

Parameters

• e : Event
• oDD : Ext.dd.DragDrop

  the clicked dd object (this dd obj)

Executed when the linked element is available

Available since: 1.1.0

Available since: 4.1.0

Parameters

• config : Object

Sets up the DragDrop object. Must be called in the constructor of any Ext.dd.DragDrop subclass

Available since: 1.1.0

Parameters

• id : String

  the id of the linked element

• sGroup : String

  the group of related items

• config : Object

  configuration attributes

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'

Available since: 4.0.0

Parameters

• config : Object

Returns

• Ext.Base

  this

Initializes Targeting functionality only... the object does not get a mousedown handler.

Available since: 1.1.0

Parameters

• id : String

  the id of the linked element

• sGroup : String

  the group of related items

• config : Object

  configuration attributes

Returns true if this instance is locked, or the drag drop mgr is locked (meaning that all drag/drop is disabled on the page.)

Available since: 1.1.0

Returns

• Boolean

  true if this obj or all drag/drop is locked, else false

Checks the tag exclusion list to see if this click should be ignored

Available since: 1.1.0

Parameters

• node : HTMLElement

  the HTMLElement to evaluate

Returns

• Boolean

  true if this is a valid tag type, false if not

Locks this instance

Available since: 1.1.0

Override the onAvailable method to do what is needed after the initial position was determined.

Available since: 1.1.0

Available since: 4.1.0

Parameters

• names : Object
• callback : Object
• scope : Object

Abstract method called during the onMouseMove event while dragging an object.

Available since: 1.1.0

Parameters

• e : Event

  the mousemove event

Abstract method called when this item is dropped on another DragDrop obj

Available since: 1.1.0

Parameters

• e : Event

  the mouseup event

• id : String/Ext.dd.DragDrop[]

  In POINT mode, the element id this was dropped on. In INTERSECT mode, an array of dd items this was dropped on.

Abstract method called when this element fist begins hovering over another DragDrop obj

Available since: 1.1.0

Parameters

• e : Event

  the mousemove event

• id : String/Ext.dd.DragDrop[]

  In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of one or more dragdrop items being hovered over.

Abstract method called when we are no longer hovering over an element

Available since: 1.1.0

Parameters

• e : Event

  the mousemove event

• id : String/Ext.dd.DragDrop[]

  In POINT mode, the element id this was hovering over. In INTERSECT mode, an array of dd items that the mouse is no longer over.

Abstract method called when this element is hovering over another DragDrop obj

Available since: 1.1.0

Parameters

• e : Event

  the mousemove event

• id : String/Ext.dd.DragDrop[]

  In POINT mode, the element id this is hovering over. In INTERSECT mode, an array of dd items being hovered over.

Abstract method called when this item is dropped on an area with no drop target

Available since: 1.1.0

Parameters

• e : Event

  the mouseup event

Called when a drag/drop obj gets a mousedown

Available since: 1.1.0

Parameters

• e : Event

  the mousedown event

Called when a drag/drop obj gets a mouseup

Available since: 1.1.0

Parameters

• e : Event

  the mouseup event

Removes this instance from the supplied interaction group

Available since: 1.1.0

Parameters

• sGroup : String

  The group to drop

Unsets an invalid css class

Available since: 1.1.0

Parameters

• cssClass : String

  the class of the element(s) you wish to re-enable

Unsets an invalid handle id

Available since: 1.1.0

Parameters

• id : String

  the id of the element to re-enable

Unsets an excluded tag name set by addInvalidHandleType

Available since: 1.1.0

Parameters

• tagName : String

  the type of element to unexclude

Must be called if you manually reposition a dd element.

Available since: 1.1.0

Parameters

• maintainOffset : Boolean

Available since: 4.0.0

Parameters

• config : Object
• applyIfNotSet : Object

Returns

• Ext.Base

  this

Allows you to specify that an element other than the linked element will be moved with the cursor during a drag

Available since: 1.1.0

Parameters

• id : String

  the id of the element that will be used to initiate the drag

Allows you to specify a child of the linked element that should be used to initiate the drag operation. An example of this would be if you have a content div with text and links. Clicking anywhere in the content area would normally start the drag operation. Use this method to specify that an element inside of the content div is the element that starts the drag operation.

Available since: 1.1.0

Parameters

• id : String

  the id of the element that will be used to initiate the drag.

Stores the initial placement of the linked element.

Available since: 2.3.0

Parameters

• diffX : Number

  the X offset, default 0

• diffY : Number

  the Y offset, default 0

Allows you to set an element outside of the linked element as a drag handle

Available since: 1.1.0

Parameters

• id : String

  the id of the element that will be used to initiate the drag

Configures the padding for the target zone in px. Effectively expands (or reduces) the virtual object size for targeting calculations. Supports css-style shorthand; if only one parameter is passed, all sides will have that padding, and if only two are passed, the top and bottom will have the first param, the left and right the second.

Available since: 1.1.0

Parameters

• iTop : Number

  Top pad

• iRight : Number

  Right pad

• iBot : Number

  Bot pad

• iLeft : Number

  Left pad

Sets the start position of the element. This is set when the obj is initialized, the reset when a drag is started.

Available since: 1.1.0

Parameters

• pos : Object

  current position (from previous lookup)

By default, the element can be dragged any place on the screen. Use this method to limit the horizontal travel of the element. Pass in 0,0 for the parameters if you want to lock the drag to the y axis.

Available since: 1.1.0

Parameters

• iLeft : Number

  the number of pixels the element can move to the left

• iRight : Number

  the number of pixels the element can move to the right

• iTickSize : Number (optional)

  parameter for specifying that the element should move iTickSize pixels at a time.

Creates the array of horizontal tick marks if an interval was specified in setXConstraint().

Available since: 1.1.0

Parameters

• iStartX : Object
• iTickSize : Object

By default, the element can be dragged any place on the screen. Set this to limit the vertical travel of the element. Pass in 0,0 for the parameters if you want to lock the drag to the x axis.

Available since: 1.1.0

Parameters

• iUp : Number

  the number of pixels the element can move up

• iDown : Number

  the number of pixels the element can move down

• iTickSize : Number (optional)

  parameter for specifying that the element should move iTickSize pixels at a time.

Creates the array of vertical tick marks if an interval was specified in setYConstraint().

Available since: 1.1.0

Parameters

• iStartY : Object
• iTickSize : Object

Abstract method called after a drag/drop object is clicked and the drag or mousedown time thresholds have beeen met.

Available since: 1.1.0

Parameters

• X : Number

  click location

• Y : Number

  click location

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

Available since: 4.0.0

Returns

• Ext.Class

Unlocks this instace

Available since: 1.1.0

Removes all drag and drop hooks for this element

Available since: 1.1.0

Available since: 4.1.1

Parameters

• members : Object

Available since: 4.1.1

Parameters

• name : Object
• member : Object

Add methods / properties to the prototype of this class.

Ext.define('My.awesome.Cat', {
    constructor: function() {
        ...
    }
});

 My.awesome.Cat.addMembers({
     meow: function() {
        alert('Meowww...');
     }
 });

 var kitty = new My.awesome.Cat;
 kitty.meow();

Available since: 4.1.0

Parameters

• members : Object

Add / override static properties of this class.

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.addStatics({
    someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
    method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
    method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
});

Available since: 4.0.2

Parameters

• members : Object

Returns

• Ext.Base

  this

Available since: 4.1.1

Parameters

• xtype : Object

Borrow another class' members to the prototype of this class.

Ext.define('Bank', {
    money: '$$$',
    printMoney: function() {
        alert('$$$$$$$');
    }
});

Ext.define('Thief', {
    ...
});

Thief.borrow(Bank, ['money', 'printMoney']);

var steve = new Thief();

alert(steve.money); // alerts '$$$'
steve.printMoney(); // alerts '$$$$$$$'

Available since: 4.0.2

Parameters

• fromClass : Ext.Base

  The class to borrow members from

• members : Array/String

  The names of the members to borrow

Returns

• Ext.Base

  this

Create a new instance of this Class.

Ext.define('My.cool.Class', {
    ...
});

My.cool.Class.create({
    someConfig: true
});

All parameters are passed to the constructor of the class.

Available since: 4.0.2

Returns

• Object

  the created instance.

Create aliases for existing prototype methods. Example:

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

Available since: 4.0.2

Parameters

• alias : String/Object

  The new method name, or an object to set multiple aliases. See flexSetter

• origin : String/Object

  The original method name

Available since: 4.1.1

Parameters

• config : Object

Get the current class' name in string format.

Ext.define('My.cool.Class', {
    constructor: function() {
        alert(this.self.getName()); // alerts 'My.cool.Class'
    }
});

My.cool.Class.getName(); // 'My.cool.Class'

Available since: 4.0.4

Returns

• String

  className

Adds members to class.

Available since: 4.0.2

Used internally by the mixins pre-processor

Available since: 4.1.1

Parameters

• name : Object
• mixinClass : Object

Available since: 4.1.1

Parameters

• fn : Object
• scope : Object

Override members of this class. Overridden methods can be invoked via callParent.

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.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

As of 4.1, direct use of this method is deprecated. Use Ext.define instead:

Ext.define('My.CatOverride', {
    override: 'My.Cat',
    constructor: function() {
        alert("I'm going to be a cat!");

        this.callParent(arguments);

        alert("Meeeeoooowwww");
    }
});

The above accomplishes the same result but can be managed by the Ext.Loader which can properly order the override and its target class and the build process can determine whether the override is needed based on the required state of the target class (My.Cat).

Available since: 4.0.2

Parameters

• members : Object

  The properties to add to this class. This should be specified as an object literal containing one or more properties.

Returns

• Ext.Base

  this class

Available since: 4.1.1