The documentation for the ExtReact product diverges somewhat from the
documentation of other Sencha products. The sections below describe
documentation for all products except where indicated as unique to
ExtReact.
Many classes have shortcut names used when creating (instantiating) a class with a
configuration object. The shortcut name is referred to as an alias (or xtype if the
class extends Ext.Component). The alias/xtype is listed next to the class name of
applicable classes for quick reference.
ExtReact component classes list the configurable name prominently at the top of the API class doc followed by the fully-qualified class name.
Framework classes or their members may be specified as private or protected. Else,
the class / member is public. Public, protected, and private are access
descriptors used to convey how and when the class or class member should be used.
Public classes and class members are available for use by any other class or application code and may be relied upon as a stable and persistent within major product versions. Public classes and members may safely be extended via a subclass.
Protected class members are stable public members intended to be used by the
owning class or its subclasses. Protected members may safely be extended via a subclass.
Private classes and class members are used internally by the framework and are not intended to be used by application developers. Private classes and members may change or be omitted from the framework at any time without notice and should not be relied upon in application logic.
ExtReact component classes display
configuration options as props
ExtReact component classes do not list
properties as a dedicated member type, but rather as
read only props
static label next to the
method name. *See Static below.Below is an example class member that we can disect to show the syntax of a class member (the lookupComponent method as viewed from the Ext.button.Button class in this case).
Let's look at each part of the member row:
lookupComponent in this example)( item ) in this example)Ext.Component in this case). This may be omitted for methods that do not
return anything other than undefined or may display as multiple possible values
separated by a forward slash / signifying that what is returned may depend on the
results of the method call (i.e. a method may return a Component if a get method calls is
successful or false if unsuccessful which would be displayed as
Ext.Component/Boolean).PROTECTED in
this example - see the Flags section below)Ext.container.Container in this example). The source
class will be displayed as a blue link if the member originates from the current class
and gray if it is inherited from an ancestor or mixed-in class.view source in the example)item : Object in the example).undefined a "Returns" section
will note the type of class or object returned and a description (Ext.Component in the
example)Available since 3.4.0 - not pictured in
the example) just after the member descriptionDefaults to: false)The API documentation uses a number of flags to further commnicate the class member's function and intent. The label may be represented by a text label, an abbreviation, or an icon.
All ExtReact props are bindable
unless decorated as immutable
Immutable ExtReact props may not be use as a configurable prop when instantiating a component
classInstance.method1().method2().etc();false is returned from
an event handler- Indicates a framework class
- A singleton framework class. *See the singleton flag for more information
- A component-type framework class (any class within the Ext JS framework that extends Ext.Component)
- Indicates that the class, member, or guide is new in the currently viewed version
- Indicates a class member of type config
Or in the case of an ExtReact component class this
indicates a member of type prop
- Indicates a class member of type property
- Indicates a class member of type
method
- Indicates a class member of type event
- Indicates a class member of type
theme variable
- Indicates a class member of type
theme mixin
- Indicates that the class, member, or guide is new in the currently viewed version
Just below the class name on an API doc page is a row of buttons corresponding to the types of members owned by the current class. Each button shows a count of members by type (this count is updated as filters are applied). Clicking the button will navigate you to that member section. Hovering over the member-type button will reveal a popup menu of all members of that type for quick navigation.
Getting and setter methods that correlate to a class config option will show up in the methods section as well as in the configs section of both the API doc and the member-type menus just beneath the config they work with. The getter and setter method documentation will be found in the config row for easy reference.
ExtReact component classes do not hoist the getter /
setter methods into the prop. All methods will be described in the
Methods section
Your page history is kept in localstorage and displayed (using the available real estate) just below the top title bar. By default, the only search results shown are the pages matching the product / version you're currently viewing. You can expand what is displayed by clicking on the button on the right-hand side of the history bar and choosing the "All" radio option. This will show all recent pages in the history bar for all products / versions.
Within the history config menu you will also see a listing of your recent page visits. The results are filtered by the "Current Product / Version" and "All" radio options. Clicking on the button will clear the history bar as well as the history kept in local storage.
If "All" is selected in the history config menu the checkbox option for "Show product details in the history bar" will be enabled. When checked, the product/version for each historic page will show alongside the page name in the history bar. Hovering the cursor over the page names in the history bar will also show the product/version as a tooltip.
Both API docs and guides can be searched for using the search field at the top of the page.
On API doc pages there is also a filter input field that filters the member rows using the filter string. In addition to filtering by string you can filter the class members by access level, inheritance, and read only. This is done using the checkboxes at the top of the page.
The checkbox at the bottom of the API class navigation tree filters the class list to include or exclude private classes.
Clicking on an empty search field will show your last 10 searches for quick navigation.
Each API doc page (with the exception of Javascript primitives pages) has a menu view of metadata relating to that class. This metadata view will have one or more of the following:
Ext.button.Button class has an alternate class name of Ext.Button). Alternate class
names are commonly maintained for backward compatibility.Runnable examples (Fiddles) are expanded on a page by default. You can collapse and expand example code blocks individually using the arrow on the top-left of the code block. You can also toggle the collapse state of all examples using the toggle button on the top-right of the page. The toggle-all state will be remembered between page loads.
Class members are collapsed on a page by default. You can expand and collapse members using the arrow icon on the left of the member row or globally using the expand / collapse all toggle button top-right.
Viewing the docs on narrower screens or browsers will result in a view optimized for a smaller form factor. The primary differences between the desktop and "mobile" view are:
The class source can be viewed by clicking on the class name at the top of an API doc page. The source for class members can be viewed by clicking on the "view source" link on the right-hand side of the member row.
Represents a 2D point with x and y properties, useful for comparison and instantiation from an event:
var point = Ext.util.Point.fromEvent(e);
Modifies the current region to be adjusted by offsets.
top : Number
Top offset
right : Number
Right offset
bottom : Number
Bottom offset
left : Number
Left offset
this
Returns the Region to which this rectangle should be moved in order to have the desired alignment with the specified target while remaining within the constraint.
The align option can be one of these forms:
t/r/b/l) followed by a percentage along that side. This describes a
point to align with a similar point in the target. So 't0-b0' would be
the same as 'tl-bl', 'l0-r50' would place the top left corner of this item
halfway down the right edge of the target item. This allows more flexibility
and also describes which two edges are considered adjacent when positioning an anchor.If the inside option is passed, the Region will attempt to align as specified,
but the position will be adjusted to constrain to the inside Region if necessary.
Note that the Region being aligned might be swapped to align to a different position
than that specified in order to enforce the constraints. Following are all of the
supported anchor positions:
Value Description
----- -----------------------------
tl The top left corner
t The center of the top edge
tr The top right corner
l The center of the left edge
c The center
r The center of the right edge
bl The bottom left corner
b The center of the bottom edge
br The bottom right corner
Example Usage:
var xy = comp.getRegion().alignTo({
align: 't-b', // align comp's top/center to el's bottom/center
target: el.getRegion(),
anchorSize: new Ext.util.Point(10, 10),
inside: new Ext.util.Region(0, Ext.Element.getViewportWidth(),
Ext.Element.getViewportHeight(), 0)
});
options : Object
The alignment options.
target : Ext.util.Region
The rectangle to which this rectangle should align.
align : String (optional)
The alignment descriptor for positioning this
rectangle with respect to the target. See Ext.util.Positionable#alignTo.
Note that if the requested alignment results in violation of the inside constraint,
the result will be flipped align to the closest edge which conforms to the constraint.
Defaults to:
tl-bl
position : Array / Ext.util.Position (optional)
The position at which to place the
resulting region before being excluded from the target area and aligned to the closest
edge which allows conformity with any passed inside option. Used instead of the align
option.
offset : Ext.util.Offset / Number[] (optional)
An offset by which to adjust the result.
anchorSize : Ext.util.Offset / Number[] (optional)
The width and height of any external
anchor
element. This is used to calculate the true bounds of the Region inclusive of the anchor.
The x dimension is the height of the arrow in all orientations, and the y dimension
is the width of the baseline of the arrow in all dimensions.
If this option is used, and the returned region successfully clears the
bounds of the target, then the anchor region will be returned in the return value
as the anchor property. This will in turn have a position property which will
be 'top', 'left, 'right', or 'bottom'.
overlap : Boolean (optional)
Pass true to allow this rectangle to overlap
the target.
rtl : Boolean (optional)
Pass true to swap left/right alignment.
inside : Ext.util.Region / Ext.dom.Element (optional)
The rectangle to which this rectangle is constrained.
minHeight : Number (optional)
Used when this Region is to be aligned directly below or above the target. Gives the option to reduce the height to fit in the available space.
axisLock : Boolean (optional)
If true, then fallback on constraint violation will
only take place along the major align axis. That is, if align: "l-r" is being used, and
axisLock: true is used, then if constraints fail, only fallback to r-l is considered.
The Region that will align this rectangle. Note that if
a minHeight option was passed, and alignment is either above or below the target,
the Region might be reduced to fit within the space.
Modifies the current region to be constrained to the targetRegion.
targetRegion : Ext.util.Region
this
Creates point on 2D plane.
x : Number (optional)
X coordinate.
Defaults to: 0
y : Number (optional)
Y coordinate.
Defaults to: 0
x : Number (optional)
X coordinate.
Defaults to: 0
y : Number (optional)
Y coordinate.
Defaults to: 0
Checks if this region completely contains the region or point that is passed in.
region : Ext.util.Region/Ext.util.Point
Clones this Point.
The new point.
Deprecated since version 2.0.0
Please use clone instead.
Copy the x and y values of another point / object to this point itself.
point : Ext.util.Point/Object
This point.
Copy the x and y values of another point / object to this point itself.
point : Ext.util.Point/Object
This point.
Compare this point and another point.
point : Ext.util.Point/Object
The point to compare with, either an instance
of Ext.util.Point or an object with x and y properties.
Returns whether they are equivalent.
Compare this point and another point.
point : Ext.util.Point/Object
The point to compare with, either an instance
of Ext.util.Point or an object with x and y properties.
Returns whether they are equivalent.
This method pushes the "other" Region out of this region via the shortest translation. If an "inside" Region is passed, the exclusion also honours that constraint.
other : Region
The Region to move so that it does not intersect this Region.
options : Object
Object of options passed to exclude.
inside : Region
A Region into which the other Region must be constrained.
minHeight : Number (optional)
If passed, indicates that the height may be reduced up to a point to fit the "other" region below or above the target but within the "inside" Region.
The edge it is now aligned to, 0=top, 1=right, 2=bottom, 3=left.
Returns a new point from an object that has x and y properties, if that object is not an instance
of Ext.util.Point. Otherwise, returns the given point itself.
object : Object
This function converts a legacy alignment string such as 't-b' into a pair of edge, offset objects which describe the alignment points of the two regions.
So tl-br becomes {myEdge:'t', offset:0}, {otherEdge:'b', offset:100}
This not only allows more flexibility in the alignment possibilities, but it also resolves any ambiguity as to chich two edges are desired to be adjacent if an anchor pointer is required.
align : String
The align spec, eg "tl-br"
rtl : Boolean (optional)
Pass true to use RTL calculations.
Returns the offsets of this region from the passed region or point.
offsetsTo : Ext.util.Region/Ext.util.Point
The region or point to get get the offsets from.
The XY page offsets
Get the offset amount of a point outside the region
axis : String (optional)
p : Ext.util.Point (optional)
the point
Get the offset amount on the x-axis
p : Number
the offset
Get the offset amount on the y-axis
p : Number
the offset
Get the width / height of this region
an object with width and height properties
Checks if this region intersects the region passed in.
region : Ext.util.Region
Returns the intersected region or false if there is no intersection.
Returns true if the passed point is within a certain distance of this point.
point : Ext.util.Point/Object
The point to check with, either an instance
of Ext.util.Point or an object with x and y properties.
threshold : Object/Number
Can be either an object with x and y properties
or a number.
Returns true if the passed point is within a certain distance of this point.
point : Ext.util.Point/Object
The point to check with, either an instance
of Ext.util.Point or an object with x and y properties.
threshold : Object/Number
Can be either an object with x and y properties or a number.
Determins whether this Point contained by the passed Region, Component or element.
region : Ext.util.Region/Ext.Component/Ext.dom.Element/HTMLElement
The rectangle to check that this Point is within.
Determines whether this Point contained by the passed Region, Component or element.
region : Ext.util.Region/Ext.Component/Ext.dom.Element/HTMLElement
The rectangle to check that this Point is within.
Check whether the point / offset is out of bound
axis : String (optional)
p : Ext.util.Point/Number (optional)
the point / offset
Check whether the offset is out of bound in the x-axis
p : Number
the offset
Check whether the offset is out of bound in the y-axis
p : Number
the offset
Returns true if this point is close to another one.
Deprecated since version 2.0.0
Please use isCloseTo instead.
Restrict a point within the region by a certain factor.
axis : String (optional)
p : Ext.util.Point/Ext.util.Offset/Object (optional)
factor : Number (optional)
Restrict an offset within the region by a certain factor, on the x-axis
p : Number
factor : Number (optional)
The factor.
Defaults to: 1
Restrict an offset within the region by a certain factor, on the y-axis
p : Number
factor : Number (optional)
The factor, defaults to 1
Round all the properties of this region
this This Region
Compare this point with another point when the x and y values of both points are rounded.
For example: [100.3,199.8] will equals to [100, 200].
point : Ext.util.Point/Object
The point to compare with, either an instance
of Ext.util.Point or an object with x and y properties.
Compare this point with another point when the x and y values of both points are rounded. For example:
[100.3,199.8] will equals to [100, 200].
point : Ext.util.Point/Object
The point to compare with, either an instance
of Ext.util.Point or an object with x and y properties.
Translates this Region to the specified position
x : Number
The new X position.
y : Number
The new Y position.
This region after translation.
Returns a human-eye-friendly string that represents this point, useful for debugging.
For example Point[12,8].
Returns a human-eye-friendly string that represents this point, useful for debugging.
For example Point[12,8].
Alias for translateBy Translate this Region by the given offset amount
x : Ext.util.Offset/Object
Object containing the x and y properties.
Or the x value is using the two argument form.
y : Number
The y value unless using an Offset object.
this This Region
Alias for translateBy Translate this Region by the given offset amount
x : Ext.util.Offset/Object
Object containing the x and y properties.
Or the x value is using the two argument form.
y : Number
The y value unless using an Offset object.
this This Region
Translate this Region by the given offset amount
x : Ext.util.Offset/Object
Object containing the x and y properties.
Or the x value is using the two argument form.
y : Number
The y value unless using an Offset object.
this This Region
Returns the smallest region that contains the current AND targetRegion.
region : Ext.util.Region
a new region
Returns a new point from an object that has x and y properties, if that object
is not an instance of Ext.util.Point. Otherwise, returns the given point itself.
object : Object
Returns a new instance of Ext.util.Point based on the pageX / pageY values
of the given event.
e : Event
The event.
Returns a new instance of Ext.util.Point based on the pageX / pageY values of the given event.
e : Event
The event.
Returns a new instance of Ext.util.Point based on the pageX / pageY values
of the given touch.
touch : Event
Returns a new instance of Ext.util.Point based on the pageX / pageY values of the given touch.
touch : Event
Override members of this class. Overridden methods can be invoked via Ext.Base#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.
this class
ExtReact | Terms of Use