Ext.view.DragZone

A named drag drop group to which this object belongs. If a group is specified, then this object will only interact with other drag drop objects in the same group.

Available since: 1.1.0

The CSS class returned to the drag source when drop is allowed.

Defaults to: Ext.baseCSSPrefix + 'dd-drop-ok'

Available since: 1.1.0

The CSS class returned to the drag source when drop is not allowed.

Defaults to: Ext.baseCSSPrefix + 'dd-drop-nodrop'

Available since: 1.1.0

The color to use when visually highlighting the drag source in the afterRepair method after a failed drop (defaults to light blue). The color must be a 6 digit hex value, without a preceding '#'.

Defaults to: 'c3daf9'

Available since: 4.0.0

An element to register with the ScrollManager if containerScroll is set. Defaults to the drag element.

Available since: 4.1.2

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

By default the frame is positioned exactly where the drag element is, so we use the cursor offset provided by Ext.dd.DD. Another option that works only if you do not have constraints on the obj is to have the drag frame centered around the cursor. Set centerFrame to true for this effect.

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

This property contains the data representing the dragged object. This data is set up by the implementation of the getDragData method. It must contain a ddel property, but can contain any other data according to the application's needs.

Available since: 3.4.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

By default we resize the drag frame to be the same size as the element we want to drag (this is to get the frame effect). We can turn it off if we want a different behavior.

Defaults to: true

Available since: 1.1.0

When set to true, the utility automatically tries to scroll the browser window when a drag and drop element is dragged near the viewport boundary.

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

The proxy is automatically resized to the dimensions of the linked element when a drag is initiated, unless resizeFrame is set to false

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

Available since: 4.0.0

An empty function by default, but provided so that you can perform a custom action after a valid drag drop has occurred by providing an implementation.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dropped element

An empty function by default, but provided so that you can perform a custom action when the dragged item enters the drop target by providing an implementation.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

An empty function by default, but provided so that you can perform a custom action after the dragged item is dragged out of the target without dropping.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

An empty function by default, but provided so that you can perform a custom action while the dragged item is over the drop target by providing an implementation.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

An empty function by default, but provided so that you can perform a custom action after an invalid drop has occurred by providing an implementation.

Available since: 1.1.0

Parameters

• e : Event

  The event object

• id : String

  The id of the dropped element

Available since: 4.0.0

An empty function by default, but provided so that you can perform a custom action after a valid drop has occurred by providing an implementation.

Available since: 1.1.0

Parameters

• target : Object

  The target DD

• e : Event

  The event object

• id : String

  The id of the dropped element

Sets the element to the location of the mousedown or click event, maintaining the cursor location relative to the location on the element that was clicked. Override this if you want to place the element in a location other than where the cursor is.

Available since: 1.1.0

Parameters

• el : HTMLElement

  the element to move

• iPageX : Number

  the X coordinate of the mousedown or drag event

• iPageY : Number

  the Y coordinate of the mousedown or drag event

Overrides: Ext.dd.DD.alignElWithMouse

Sets up config options specific to this class. Overrides Ext.dd.DragDrop, but all versions of this method through the inheritance chain are called

Available since: 1.1.0

Overrides: Ext.dd.DD.applyConfig

Sets the pointer offset to the distance between the linked element's top left corner and the location the element was clicked.

Available since: 1.1.0

Parameters

• iPageX : Number

  the X coordinate of the click

• iPageY : Number

  the Y coordinate of the click

Overrides: Ext.dd.DD.autoOffset

Auto-scroll the window if the dragged object has been moved beyond the visible window boundary.

Available since: 1.1.0

Parameters

• x : Number

  the drag element's x position

• y : Number

  the drag element's y position

• h : Number

  the height of the drag element

• w : Number

  the width of the drag element

Event that fires prior to the onDrag event. Overrides Ext.dd.DragDrop.

Available since: 1.1.0

Parameters

• e : Object

Overrides: Ext.dd.DragDrop.b4Drag

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

Overrides: Ext.dd.DDProxy.b4EndDrag

overrides Ext.dd.DragDrop

Event that fires prior to the onMouseDown event. Overrides Ext.dd.DragDrop.

Available since: 1.1.0

Parameters

• e : Object

Overrides: Ext.dd.DD.b4MouseDown

overrides Ext.dd.DragDrop

Code that executes immediately before the startDrag event

Available since: 1.1.0

Parameters

• x : Object
• y : Object

Overrides: Ext.dd.DragDrop.b4StartDrag

An empty function by default, but provided so that you can perform a custom action before the dragged item is dropped onto the target and optionally cancel the onDragDrop.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

Returns

• Boolean

  isValid True if the drag drop event is valid, else false to cancel

An empty function by default, but provided so that you can perform a custom action before the dragged item enters the drop target and optionally cancel the onDragEnter.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

Returns

• Boolean

  isValid True if the drag event is valid, else false to cancel

An empty function by default, but provided so that you can perform a custom action before the dragged item is dragged out of the target without dropping, and optionally cancel the onDragOut.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

Returns

• Boolean

  isValid True if the drag event is valid, else false to cancel

An empty function by default, but provided so that you can perform a custom action while the dragged item is over the drop target and optionally cancel the onDragOver.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

Returns

• Boolean

  isValid True if the drag event is valid, else false to cancel

An empty function by default, but provided so that you can perform a custom action after an invalid drop has occurred.

Available since: 1.1.0

Parameters

• target : Ext.dd.DragDrop

  The drop target

• e : Event

  The event object

• id : String

  The id of the dragged element

Returns

• Boolean

  isValid True if the invalid drop should proceed, else false to cancel

Available since: 4.0.0

Saves the most recent position so that we can reset the constraints and tick marks on-demand. We need to know this so that we can calculate the number of pixels the element is offset from its original position.

Available since: 1.1.0

Parameters

• iPageX : Number (optional)

  the current x position (this just makes it so we don't have to look it up again)

• iPageY : Number (optional)

  the current y position (this just makes it so we don't have to look it up again)

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)

Creates the proxy element if it does not yet exist

Available since: 1.1.0

Available since: 3.4.0

Overrides: Ext.dd.DragSource.destroy

Called when we are done dragging the object

Available since: 1.1.0

Parameters

• e : Event

  the mouseup event

Overrides: Ext.dd.DDProxy.endDrag

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.

Returns the drag source's underlying Ext.dd.StatusProxy

Available since: 1.1.0

Returns

• Ext.dd.StatusProxy

  proxy The StatusProxy

Finds the location the element should be placed if we want to move it to where the mouse location less the click offset would place us.

Available since: 1.1.0

Parameters

• iPageX : Number

  the X coordinate of the click

• iPageY : Number

  the Y coordinate of the click

Returns

• Object

  An object that contains the coordinates (Object.x and Object.y)

  • x : Number
  • y : Number

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)

Overrides: Ext.dd.DragDrop.handleMouseDown

Executed when the linked element is available

Available since: 1.1.0

Available since: 4.1.0

Parameters

• config : Object

Hides the drag source's Ext.dd.StatusProxy

Available since: 1.1.0

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

Initialization for the drag frame element. Must be called in the constructor of all subclasses

Available since: 1.1.0

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

An empty function by default, but provided so that you can perform a custom action before the initial drag event begins and optionally cancel it.

Available since: 1.1.0

Parameters

• data : Object

  An object containing arbitrary data to be shared with drop targets

• e : Event

  The event object

Returns

• Boolean

  isValid True if the drag event is valid, else false to cancel

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.

Overrides: Ext.dd.DragDrop.onDragDrop

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.

Overrides: Ext.dd.DragDrop.onDragEnter

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.

Overrides: Ext.dd.DragDrop.onDragOut

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.

Overrides: Ext.dd.DragDrop.onDragOver

Available since: 4.0.0

Parameters

• data : Object
• e : Object

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

Overrides: Ext.dd.DragDrop.onInvalidDrop

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

An empty function by default, but provided so that you can perform a custom action once the initial drag event has begun. The drag cannot be canceled from this function.

Available since: 1.1.0

Parameters

• x : Number

  The x position of the click on the dragged object

• y : Number

  The y position of the click on the dragged object

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

Sets the pointer offset. You can call this directly to force the offset to be in a particular location (e.g., pass in 0,0 to set it to the center of the object)

Available since: 1.1.0

Parameters

• iDeltaX : Number

  the distance from the left

• iDeltaY : Number

  the distance from the top

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

Sets the drag element to the location of the mousedown or click event, maintaining the cursor location relative to the location on the element that was clicked. Override this if you want to place the element in a location other than where the cursor is.

Available since: 1.1.0

Parameters

• iPageX : Number

  the X coordinate of the mousedown or drag event

• iPageY : Number

  the Y coordinate of the mousedown or drag event

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

Resizes the drag frame to the dimensions of the clicked object, positions it over the object, and finally displays it

Available since: 1.1.0

Parameters

• iPageX : Number

  X click position

• iPageY : Number

  Y click position

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

Overrides: Ext.dd.DragDrop.startDrag

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

toString method

Available since: 1.1.0

Returns

• String

  string representation of the dd obj

Overrides: Ext.dd.DD.toString

Available since: 4.0.0

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