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


top

Ext.chart.axis.Axis xtype: axis premium

NPM Package

@sencha/ext-charts

Hierarchy

Ext.Base
Ext.chart.axis.Axis

Summary

Defines axis for charts.

Using the current model, the type of axis can be easily extended. By default, Sencha Charts provide three different types of axis:

  • numeric - the data attached to this axis is numeric and continuous.
  • time - the data attached to this axis is (or gets converted into) a date/time value; it is continuous.
  • category - the data attached to this axis belongs to a finite set. The data points are evenly placed along the axis.

The behavior of an axis can be easily changed by setting different types of axis layout and axis segmenter to the axis.

Axis layout defines how the data points are placed. Using continuous layout, the data points will be distributed by the numeric value. Using discrete layout the data points will be spaced evenly. Furthermore, if you want to combine the data points with the duplicate values in a discrete layout, you should use combineDuplicate layout.

Segmenter defines the way to segment data range. For example, if you have a Date-type data range from Jan 1, 1997 to Jan 1, 2017, the segmenter will segment the data range into years, months or days based on the current zooming level.

It is possible to write custom axis layouts and segmenters to extends this behavior by simply implementing interfaces Ext.chart.axis.layout.Layout and Ext.chart.axis.segmenter.Segmenter.

Here's an example for the axes part of a chart definition: An example of axis for a series (in this case for an area chart that has multiple layers of yFields) could be:

axes: [{
    type: 'numeric',
    position: 'left',
    title: 'Number of Hits',
    grid: {
        odd: {
            opacity: 1,
            fill: '#ddd',
            stroke: '#bbb',
            lineWidth: 1
        }
    },
    minimum: 0
}, {
    type: 'category',
    position: 'bottom',
    title: 'Month of the Year',
    grid: true,
    label: {
        rotate: {
            degrees: 315
        }
    }
}]

In this case we use a numeric axis for displaying the values of the Area series and a category axis for displaying the names of the store elements. The numeric axis is placed on the left of the screen, while the category axis is placed at the bottom of the chart. Both the category and numeric axes have grid set, which means that horizontal and vertical lines will cover the chart background. In the category axis the labels will be rotated so they can fit the space better.

No members found using the current filters

configs

Optional Configs

adjustByMajorUnit : Boolean

Whether to make the auto-calculated minimum and maximum of the axis a multiple of the interval between the major ticks of the axis. If majorTickSteps, minimum or maximum configs have been set, this config will be ignored. Defaults to 'true'.

Defaults to:

true

getAdjustByMajorUnit : Boolean

Returns the value of adjustByMajorUnit

Returns

Boolean

setAdjustByMajorUnit (adjustByMajorUnit)

Sets the value of adjustByMajorUnit

Parameters

adjustByMajorUnit :  Boolean

background : Object

The background config for the axis surface.

Defaults to:

null

getBackground : Object

Returns the value of background

Returns

Object

setBackground (background)

Sets the value of background

Parameters

background :  Object

fields : Array

An array containing the names of the record fields which should be mapped along the axis. This is optional if the binding between series and fields is clear.

Defaults to:

[]

getFields : Array

Returns the value of fields

Returns

Array

setFields (fields)

Sets the value of fields

Parameters

fields :  Array

floating : Number / Object

If floating is a number, then it's a percentage displacement of the axis from its initial position in the direction opposite to the axis' direction. For instance, '{position:"left", floating:75}' displays a vertical axis at 3/4 of the chart, starting from the left. It is equivalent to '{position:"right", floating:25}'. If floating is an object, then floating.value is the position of this axis along another axis, defined by floating.alongAxis, where alongAxis is an ID, an Ext.chart.AbstractChart#axes config index, or the other axis itself. alongAxis must have an opposite alignment. For example:

 axes: [
     {
         title: 'Average Temperature (F)',
         type: 'numeric',
         position: 'left',
         id: 'temperature-vertical-axis',
         minimum: -30,
         maximum: 130
     },
     {
         title: 'Month (2013)',
         type: 'category',
         position: 'bottom',
         floating: {
             value: 32,
             alongAxis: 'temperature-vertical-axis'
         }
     }
 ]

Defaults to:

null

grid : Object

The grid configuration object for the Axis style. Can contain stroke or fill attributes. Also may contain an odd or even property in which you only style things on odd or even rows. For example:

grid {
    odd: {
        stroke: '#555'
    },
    even: {
        stroke: '#ccc'
    }
}

Defaults to:

false

getGrid : Object

Returns the value of grid

Returns

Object

setGrid (grid)

Sets the value of grid

Parameters

grid :  Object

hidden : Boolean

Indicate whether to hide the axis. If the axis is hidden, one of the axis line, ticks, labels or the title will be shown and no margin will be taken. The coordination mechanism works fine no matter if the axis is hidden.

Defaults to:

false

getHidden : Boolean

Returns the value of hidden

Returns

Boolean

setHidden (hidden)

Sets the value of hidden

Parameters

hidden :  Boolean

increment : Number

Given a minimum and maximum bound for the series to be rendered (that can be obtained automatically or by manually setting minimum and maximum) tick marks will be added on each increment from the minimum value to the maximum one.

Defaults to:

0.5

getIncrement : Number

Returns the value of increment

Returns

Number

setIncrement (increment)

Sets the value of increment

Parameters

increment :  Number

label : Object

The label configuration object for the Axis. This object may include style attributes like spacing, padding, font that receives a string or number and returns a new string with the modified values.

For more supported values, see the configurations for Ext.chart.sprite.Label.

Defaults to:

undefined

getLabel : Object

Returns the value of label

Returns

Object

setLabel (label)

Sets the value of label

Parameters

label :  Object

labelInSpan : Boolean

Draws the labels in the middle of the spans.

Defaults to:

null

getLabelInSpan : Boolean

Returns the value of labelInSpan

Returns

Boolean

setLabelInSpan (labelInSpan)

Sets the value of labelInSpan

Parameters

labelInSpan :  Boolean

layout : Object / Ext.chart.axis.layout.Layout

The axis layout config. See Ext.chart.axis.layout.Layout

Defaults to:

'continuous'

setLayout (layout)

Sets the value of layout

Parameters

layout :  Object / Ext.chart.axis.layout.Layout

limits : Array / Object

The limit lines configuration for the axis. For example:

limits: [{
    value: 50,
    line: {
        strokeStyle: 'red',
        lineDash: [6, 3],
        title: {
            text: 'Monthly minimum',
            fontSize: 14
        }
    }
}]

Defaults to:

null

getLimits : Array / Object

Returns the value of limits

Returns

Array / Object

setLimits (limits)

Sets the value of limits

Parameters

limits :  Array / Object

linkedTo : Ext.chart.axis.Axis / String / Number

Axis (itself, its ID or index) that this axis is linked to. When an axis is linked to a master axis, it will use the same data as the master axis. It can be used to show additional info, or to ease reading the chart by duplicating the scales.

Defaults to:

null

getLinkedTo : Ext.chart.axis.Axis / String / Number

Returns the value of linkedTo

Returns

Ext.chart.axis.Axis / String / Number

setLinkedTo (linkedTo)

Sets the value of linkedTo

Parameters

linkedTo :  Ext.chart.axis.Axis / String / Number

majorTickSteps : Number

Forces the number of major ticks to the specified value. Both minimum and maximum should be specified.

Defaults to:

0

getMajorTickSteps : Number

Returns the value of majorTickSteps

Returns

Number

setMajorTickSteps (majorTickSteps)

Sets the value of majorTickSteps

Parameters

majorTickSteps :  Number

margin : Number

The margin of the axis. Used to control the spacing between axes in charts with multiple axes. Unlike CSS where the margin is added on all 4 sides of an element, the margin is the total space that is added horizontally for a vertical axis, vertically for a horizontal axis, and radially for an angular axis.

Defaults to:

0

getMargin : Number

Returns the value of margin

Returns

Number

setMargin (margin)

Sets the value of margin

Parameters

margin :  Number

maximum : Number

The maximum value drawn by the axis. If not set explicitly, the axis maximum will be calculated automatically.

Defaults to:

NaN

getMaximum : Number

Returns the value of maximum

Returns

Number

setMaximum (maximum)

Sets the value of maximum

Parameters

maximum :  Number

maxZoom : Number

The maximum zooming level for axis.

Defaults to:

10000

getMaxZoom : Number

Returns the value of maxZoom

Returns

Number

setMaxZoom (maxZoom)

Sets the value of maxZoom

Parameters

maxZoom :  Number

minimum : Number

The minimum value drawn by the axis. If not set explicitly, the axis minimum will be calculated automatically.

Defaults to:

NaN

getMinimum : Number

Returns the value of minimum

Returns

Number

setMinimum (minimum)

Sets the value of minimum

Parameters

minimum :  Number

minorTickSteps : Number

The number of small ticks between two major ticks.

Defaults to:

0

getMinorTickSteps : Number

Returns the value of minorTickSteps

Returns

Number

setMinorTickSteps (minorTickSteps)

Sets the value of minorTickSteps

Parameters

minorTickSteps :  Number

minZoom : Number

The minimum zooming level for axis.

Defaults to:

1

getMinZoom : Number

Returns the value of minZoom

Returns

Number

setMinZoom (minZoom)

Sets the value of minZoom

Parameters

minZoom :  Number

needHighPrecision : Boolean

Indicates that the axis needs high precision surface implementation. See Ext.draw.engine.Canvas#highPrecision

Defaults to:

false

getNeedHighPrecision : Boolean

Returns the value of needHighPrecision

Returns

Boolean

setNeedHighPrecision (needHighPrecision)

Sets the value of needHighPrecision

Parameters

needHighPrecision :  Boolean

position : String

Where to set the axis. Available options are left, bottom, right, top, radial and angular.

Defaults to:

'bottom'

getPosition : String

Returns the value of position

Returns

String

setPosition (position)

Sets the value of position

Parameters

position :  String

reconcileRange : Boolean

If 'true' the range of the axis will be a union of ranges of all the axes with the same direction. Defaults to 'false'.

Defaults to:

false

getReconcileRange : Boolean

Returns the value of reconcileRange

Returns

Boolean

setReconcileRange (reconcileRange)

Sets the value of reconcileRange

Parameters

reconcileRange :  Boolean

renderer : Function

Allows to change the text shown next to the tick.

Defaults to:

null

Parameters

axis :  Ext.chart.axis.Axis

The axis.

label :  String/Number

The label.

layoutContext :  Object

The object that holds calculated positions of axis' ticks based on current layout, segmenter, axis length and configuration.

lastLabel :  String/Number/null

The last label (if any).

Returns

:String

The label to display.

getRenderer : Function

Returns the value of renderer

Returns

Function

setRenderer (renderer)

Sets the value of renderer

Parameters

renderer :  Function

segmenter : Object / Ext.chart.axis.segmenter.Segmenter

The segmenter config. See Ext.chart.axis.segmenter.Segmenter

Defaults to:

'numeric'

setSegmenter (segmenter)

Sets the value of segmenter

Parameters

segmenter :  Object / Ext.chart.axis.segmenter.Segmenter

style : Object

The style for the axis line and ticks. Refer to the Ext.chart.axis.sprite.Axis

Defaults to:

null

getStyle : Object

Returns the value of style

Returns

Object

setStyle (style)

Sets the value of style

Parameters

style :  Object

title : String / Object

The title for the Axis. If given a String, the 'text' attribute of the title sprite will be set, otherwise the style will be set.

Defaults to:

null

getTitle : String / Object

Returns the value of title

Returns

String / Object

setTitle (title)

Sets the value of title

Parameters

title :  String / Object

titleMargin : Number

The margin around the axis title. Unlike CSS where the margin is added on all 4 sides of an element, the titleMargin is the total space that is added horizontally for a vertical title and vertically for an horizontal title, with half the titleMargin being added on either side.

Defaults to:

4

getTitleMargin : Number

Returns the value of titleMargin

Returns

Number

setTitleMargin (titleMargin)

Sets the value of titleMargin

Parameters

titleMargin :  Number

visibleRange : Array

Specify the proportion of the axis to be rendered. The series bound to this axis will be synchronized and transformed accordingly.

Defaults to:

[0, 1]

getVisibleRange : Array

Returns the value of visibleRange

Returns

Array

setVisibleRange (visibleRange)

Sets the value of visibleRange

Parameters

visibleRange :  Array

properties

methods

Instance Methods
Static Methods

override ( members ) : Ext.Base
static sta

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

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

events

rangechange ( axis, range, oldRange, eOpts )

Fires when the range of the axis changes.

Parameters

axis :  Ext.chart.axis.Axis

range :  Array

oldRange :  Array

eOpts : Object

The options object passed to Ext.util.Observable.addListener.

visiblerangechange ( axis, visibleRange, eOpts )

Fires when the visibleRange of the axis changes.

Parameters

axis :  Ext.chart.axis.Axis

visibleRange :  Array

eOpts : Object

The options object passed to Ext.util.Observable.addListener.

ExtReact 6.7.0