Instance Methods
The proxy is automatically resized to the dimensions of the linked
element when a drag is initiated, unless resizeFrame is set to false
This method applies a versioned, deprecation declaration to this class. This
is typically called by the deprecated config.
Lets you specify a css class of elements that will not initiate a drag
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
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.
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.
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.
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.
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.
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.
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.
id :
String
The id of the dropped element
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.
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.
iPageX :
Number
the X coordinate of the mousedown or drag event
iPageY :
Number
the Y coordinate of the mousedown or drag event
Sets up config options specific to this class. Overrides
Ext.dd.DragDrop, but all versions of this method through the
inheritance chain are called
Event that fires prior to the onDrag event. Overrides
Ext.dd.DragDrop.
Code that executes immediately before the onDragDrop event
Code that executes immediately before the onDragOut event
Code that executes immediately before the onDragOver event
Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.
Code that executes immediately before the startDrag event
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.
id :
String
The id of the dragged element
:
Boolean
isValid True if the drag drop event is valid, else false to cancel
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
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.
id :
String
The id of the dragged element
:
Boolean
isValid True if the drag event is valid, else false to cancel
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
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.
id :
String
The id of the dragged element
:
Boolean
isValid True if the drag event is valid, else false to cancel
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
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.
id :
String
The id of the dragged element
:
Boolean
isValid True if the drag event is valid, else false to cancel
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
An empty function by default, but provided so that you can perform a custom action after an invalid
drop has occurred.
id :
String
The id of the dragged element
:
Boolean
isValid True if the invalid drop should proceed, else false to cancel
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
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.
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 Ext.Base#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"
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callOverridden(arguments)
:
Object
Returns the result of calling the overridden method
Deprecated since version 4.1.0
Use method-callParent instead.
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 and private methods.
Ext.define('My.Derived2', {
extend: 'My.Base',
// privates: {
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',
// privates: {
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
method-callSuper. This is often done to patch a method to fix a bug.
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callParent(arguments)
:
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', {
extend: 'Ext.some.Class',
method: function () {
console.log('Bad');
// ... logic but with a bug ...
this.callParent();
}
});
To patch the bug in Ext.some.DerivedClass.method, the typical solution is to create an
override:
Ext.define('App.patches.DerivedClass', {
override: 'Ext.some.DerivedClass',
method: function () {
console.log('Fixed');
// ... logic but with bug fixed ...
this.callSuper();
}
});
The patch method cannot use method-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".
args :
Array/Arguments
The arguments, either an array or the arguments object
from the current method, for example: this.callSuper(arguments)
:
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.
Clears any tick interval defined for this instance
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.dom.Element object:
Ext.get("dragDiv1").initDDProxy("proxytest", {dragElId: "existingProxyDiv"}, {
startDrag : function(){
this.constrainTo("parent-id");
}
});
constrainTo :
String/HTMLElement/Ext.dom.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 new DragZone.
el :
String/HTMLElement/Ext.dom.Element
The container element or ID of it.
Creates the proxy element if it does not yet exist
This method is called to cleanup an object and its resources. After calling
this method, the object should not be used any further in any way, including
access to its methods and properties.
To prevent potential memory leaks, all object references will be nulled
at the end of destruction sequence, unless clearPropertiesOnDestroy
is set to false.
Destroys member properties by name.
If a property name is the name of a config, the getter is not invoked, so
if the config has not been initialized, nothing will be done.
The property will be destroyed, and the corrected name (if the property is a config
and config names are prefixed) will set to null in this object's dictionary.
args :
String...
One or more names of the properties to destroy and remove from the object.
Returns a specified config property value. If the name parameter is not passed,
all current configuration options will be returned as key value pairs.
name :
String
(optional)
The name of the config property to get.
peek :
Boolean
(optional)
true to peek at the raw value without calling the getter.
Defaults to: false
ifInitialized :
Boolean
(optional)
true to only return the initialized property value,
not the raw config value, and not to trigger initialization. Returns undefined if the
property has not yet been initialized.
Defaults to: false
:
Object
The config property value.
Called when a mousedown occurs in this container. Looks in Ext.dd.Registry for a valid target to drag
based on the mouse down. Override this method to provide your own lookup logic (e.g. finding a child by class
name). Make sure your returned object has a "ddel" attribute (with an HTML Element) for other functions to work.
:
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
:
HTMLElement
Returns a reference to the linked element
:
HTMLElement
Returns the initial configuration passed to the constructor when
instantiating this class.
Given this example Ext.button.Button definition and instance:
Ext.define('MyApp.view.Button', {
extend: 'Ext.button.Button',
xtype: 'mybutton',
scale: 'large',
enableToggle: true
});
var btn = Ext.create({
xtype: 'mybutton',
renderTo: Ext.getBody(),
text: 'Test Button'
});
Calling btn.getInitialConfig() would return an object including the config
options passed to the create method:
xtype: 'mybutton',
renderTo: // The document body itself
text: 'Test Button'
Calling btn.getInitialConfig('text')returns 'Test Button'.
name :
String
(optional)
Name of the config option to return.
:
Object/Mixed
The full config object or a single config value
when name parameter specified.
Called before a repair of an invalid drop to get the XY to animate to. By default returns the XY of
this.dragData.ddel
:
Number[]
The xy location (e.g. [100, 200])
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
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.
iPageX :
Number
the X coordinate of the click
iPageY :
Number
the Y coordinate of the click
:
Object
An object that contains the coordinates (Object.x and Object.y)
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.
val :
Number
where we want to place the object
tickArray :
Number[]
sorted array of valid points
:
Number
Executed when the linked element is available
Sets up the DragDrop object. Must be called in the constructor of any
Ext.dd.DragDrop subclass
id :
String
the id of the linked element
sGroup :
String
the group of related items
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'
:
Ext.Base
Initialization for the drag frame element. Must be called in the
constructor of all subclasses
Initializes Targeting functionality only... the object does not
get a mousedown handler.
id :
String
the id of the linked element
sGroup :
String
the group of related items
Returns true if this instance is locked, or the drag drop mgr is locked
(meaning that all drag/drop is disabled on the page.)
:
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
node :
HTMLElement
the HTMLElement to evaluate
:
Boolean
true if this is a valid tag type, false if not
Adds a "destroyable" object to an internal list of objects that will be destroyed
when this instance is destroyed (via destroy).
:
Object
Override the onAvailable method to do what is needed after the initial
position was determined.
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.
data :
Object
An object containing arbitrary data to be shared with drop targets
:
Boolean
isValid True if the drag event is valid, else false to cancel
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
Abstract method called during the onMouseMove event while dragging an
object.
Called once drag threshold has been reached to initialize the proxy element. By default, it clones the
this.dragData.ddel
x :
Number
The x position of the click on the dragged object
y :
Number
The y position of the click on the dragged object
:
Boolean
true to continue the drag, false to cancel
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
Called when a drag/drop obj gets a mousedown
Called when a drag/drop obj gets a mouseup
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.
x :
Number
The x position of the click on the dragged object
y :
Number
The y position of the click on the dragged object
This is a template method. a hook into the functionality of this
class. Feel free to override it in child classes.
Removes this instance from the supplied interaction group
Unsets an invalid css class
cssClass :
String
the class of the element(s) you wish to
re-enable
Unsets an invalid handle id
id :
String
the id of the element to re-enable
Unsets an excluded tag name set by addInvalidHandleType
tagName :
String
the type of element to unexclude
Must be called if you manually reposition a dd element.
Sets a single/multiple configuration options.
name :
String/Object
The name of the property to set, or a set of key value pairs to set.
value :
Object
(optional)
The value to set for the name parameter.
:
Ext.Base
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)
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
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.
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.
id :
String
the id of the element that will be used to
initiate the drag.
Stores the initial placement of the linked element.
Allows you to set an element outside of the linked element as a drag
handle
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.
Sets the start position of the element. This is set when the obj
is initialized, the reset when a drag is started.
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.
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().
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.
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().
Resizes the drag frame to the dimensions of the clicked object, positions
it over the object, and finally displays it
Get the reference to the class from which this object was instantiated. Note that unlike Ext.Base#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
:
Ext.Class
toString method
:
String
string representation of the dd obj
Destroys a given set of linked objects. This is only needed if
the linked object is being destroyed before this instance.
names :
String[]
The names of the linked objects to destroy.
:
Ext.Base
Removes all drag and drop hooks for this element
Static Methods
Adds new config properties to this class. This is called for classes when they
are declared, then for any mixins that class may define and finally for any
overrides defined that target the class.
mixinClass :
Ext.Class
(optional)
The mixin class if the configs are from a mixin.
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();
members :
Object
The members to add to this class.
isStatic :
Boolean
(optional)
Pass true if the members are static.
Defaults to: false
privacy :
Boolean
(optional)
Pass true if the members are private. This
only has meaning in debug mode and only for methods.
Defaults to: false
:
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() { ... };
});
:
Ext.Base
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 '$$$$$$$'
fromClass :
Ext.Base
The class to borrow members from
members :
Array/String
The names of the members to borrow
:
Ext.Base
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.
:
Object
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()
alias :
String/Object
The new method name, or an object to set multiple aliases. See
flexSetter
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'
:
String
Used internally by the mixins pre-processor
:
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"
Direct use of this method should be rare. 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).
members :
Object
The properties to add to this class. This should be
specified as an object literal containing one or more properties.
:
Ext.Base
Ext JS | Terms of Use