ExtReact Docs Help

Introduction

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.

Terms, Icons, and Labels

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.

Access Levels

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.

Member Types

Member Syntax

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).

lookupComponent ( item ) : Ext.Component
protected

Called when a raw config object is added to this container either during initialization of the items config, or when new items are added), or {@link #insert inserted.

This method converts the passed object into an instanced child component.

This may be overridden in subclasses when special processing needs to be applied to child creation.

Parameters

item :  Object

The config object being added.

Returns
Ext.Component

The component to be added.

Let's look at each part of the member row:

Member Flags

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.

Class Icons

- 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

Member Icons

- 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

Class Member Quick-Nav Menu

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.

Getter and Setter Methods

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

History Bar

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.

Search and Filters

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.

API Doc Class Metadata

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:

Expanding and Collapsing Examples and Class Members

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.

Desktop -vs- Mobile View

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:

Viewing the Class Source

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.

ExtReact 6.6.0


top

NPM Package

@sencha/ext-react

Hierarchy

Ext.util.Region

Sub-Classes

Ext.util.Point

Summary

This class represents a rectangular region in X,Y space, and performs geometric transformations or tests upon the region.

This class may be used to compare the document regions occupied by elements.

No members found using the current filters

properties

methods

Instance Methods

adjust ( top, right, bottom, left ) : Ext.util.Region

Modifies the current region to be adjusted by offsets.

Parameters

top :  Number

Top offset

right :  Number

Right offset

bottom :  Number

Bottom offset

left :  Number

Left offset

Returns

:Ext.util.Region

this

alignTo ( options ) : Ext.util.Region

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:

  • Blank: Defaults to aligning the region's top-left corner to the target's bottom-left corner ("tl-bl").
  • Two anchors: If two values from the table below are passed separated by a dash, the first value is used as this region's anchor point, and the second value is used as the target's anchor point.
  • One anchor: The passed anchor position is used as the target's anchor point. This region will position its top-left corner (tl) to that point.
  • Two edge/offset descriptors: An edge/offset descriptor is an edge initial (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)
 });

Parameters

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.

Returns

:Ext.util.Region

The Region that will align this rectangle. Note that if a minHeight option was passed, and aligment is either above or below the target, the Region might be reduced to fit within the space.

constrainTo ( targetRegion ) : Ext.util.Region

Modifies the current region to be constrained to the targetRegion.

Parameters

targetRegion :  Ext.util.Region

Returns

:Ext.util.Region

this

constructor ( top, right, bottom, left )

Parameters

top :  Number

The topmost pixel of the Region.

right :  Number

The rightmost pixel of the Region.

bottom :  Number

The bottom pixel of the Region.

left :  Number

The leftmost pixel of the Region.

contains ( region ) : Boolean

Checks if this region completely contains the region or point that is passed in.

Parameters

region :  Ext.util.Region/Ext.util.Point

Returns

:Boolean

copy Ext.util.Region

Create a copy of this Region.

Returns

:Ext.util.Region

copyFrom ( p ) : Ext.util.Region

Copy the values of another Region to this Region

Parameters

p :  Ext.util.Region

The region to copy from.

Returns

:Ext.util.Region

This Region

equals ( region ) : Boolean

Check whether this region is equivalent to the given region

Parameters

region :  Ext.util.Region

The region to compare with

Returns

:Boolean

exclude ( other, inside, [minHeight], [allowX], [allowY] ) : Number

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.

Parameters

other :  Region

The Region to move so that it does not intersect this Region.

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.

allowX :  Boolean (optional)

Pass false to disallow translation along the X axis.

Defaults to: true

allowY :  Boolean (optional)

Pass false to disallow translation along the Y axis.

Defaults to: true

Returns

:Number

The edge it is now aligned to, 0=top, 1=right, 2=bottom, 3=left.

getAlignInfo ( align, [rtl] )

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.

Parameters

align :  String

The align spec, eg "tl-br"

rtl :  Boolean (optional)

Pass true to use RTL calculations.

getOffsetsTo ( offsetsTo ) : Object

Returns the offsets of this region from the passed region or point.

Parameters

offsetsTo :  Ext.util.Region/Ext.util.Point

The region or point to get get the offsets from.

Returns

:Object

The XY page offsets

x :  Number

The x offset

y :  Number

The y offset

getOutOfBoundOffset ( [axis], [p] ) : Ext.util.Offset

Get the offset amount of a point outside the region

Parameters

axis :  String (optional)

p :  Ext.util.Point (optional)

the point

Returns

:Ext.util.Offset

getOutOfBoundOffsetX ( p ) : Number

Get the offset amount on the x-axis

Parameters

p :  Number

the offset

Returns

:Number

getOutOfBoundOffsetY ( p ) : Number

Get the offset amount on the y-axis

Parameters

p :  Number

the offset

Returns

:Number

intersect ( region ) : Ext.util.Region/Boolean

Checks if this region intersects the region passed in.

Parameters

region :  Ext.util.Region

Returns

:Ext.util.Region/Boolean

Returns the intersected region or false if there is no intersection.

isOutOfBound ( [axis], [p] ) : Boolean

Check whether the point / offset is out of bound

Parameters

axis :  String (optional)

p :  Ext.util.Point/Number (optional)

the point / offset

Returns

:Boolean

isOutOfBoundX ( p ) : Boolean

Check whether the offset is out of bound in the x-axis

Parameters

p :  Number

the offset

Returns

:Boolean

isOutOfBoundY ( p ) : Boolean

Check whether the offset is out of bound in the y-axis

Parameters

p :  Number

the offset

Returns

:Boolean

round Ext.util.Region

Round all the properties of this region

Returns

:Ext.util.Region

this This Region

setPosition ( x, y ) : Ext.util.Region

Translates this Region to the specified position

Parameters

x :  Number

The new X position.

y :  Number

The new Y position.

Returns

:Ext.util.Region

This region after translation.

translateBy ( x, y ) : Ext.util.Region

Translate this Region by the given offset amount

Parameters

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.

Returns

:Ext.util.Region

this This Region

union ( region ) : Ext.util.Region

Returns the smallest region that contains the current AND targetRegion.

Parameters

region :  Ext.util.Region

Returns

:Ext.util.Region

a new region

Static Methods

from ( o ) : Ext.util.Region
static sta

Creates a Region from a "box" Object which contains four numeric properties top, right, bottom and left.

Parameters

o :  Object

An object with top, right, bottom and left properties.

Returns

:Ext.util.Region

region The Region constructed based on the passed object

getRegion ( el ) : Ext.util.Region
static sta

Retrieves an Ext.util.Region for a particular element.

Parameters

el :  String/HTMLElement/Ext.dom.Element

An element ID, htmlElement or Ext.Element representing an element in the document.

Returns

:Ext.util.Region

region

ExtReact 6.6.0