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.
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
Sets the pointer offset to the distance between the linked element's top
left corner and the location the element was clicked.
iPageX :
Number
the X coordinate of the click
iPageY :
Number
the Y coordinate of the click
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
Code that executes immediately before the endDrag event
Event that fires prior to the onMouseDown event. Overrides
Ext.dd.DragDrop.
Code that executes immediately before the startDrag event
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 DDProxy.
id :
String
the id of the linked html element
sGroup :
String
the group of related DragDrop objects
config :
Object
an object containing configurable attributes.
Valid properties for DDProxy in addition to those in DragDrop:
- resizeFrame
- centerFrame
- dragElId
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.
Called when we are done dragging 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.
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.
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
Called when this object is clicked
oDD :
Ext.dd.DragDrop
the clicked dd object (this dd obj)
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.
Abstract method called during the onMouseMove event while dragging an
object.
Abstract method called when this item is dropped on another DragDrop
obj
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
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
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
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
Called when a drag/drop obj gets a mousedown
Called when a drag/drop obj gets a mouseup
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
Abstract method called after a drag/drop object is clicked
and the drag or mousedown time thresholds have beeen met.
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
