Ext JS 4.2 to 5 (charts)
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.
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.
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.
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
- 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.
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.
We introduced a new, high performance, touch-optimized charts package in Sencha Touch 2.1. We have now enhanced that charts package to work with Ext JS 5 and Sencha Touch. This brings lots of new capabilities, as well as great performance on tablet devices.
Let's talk about some of the changes that may need to be made to update from Ext JS charts to the new Sencha Charts package.
Sencha Charts are not included in the Ext JS library by default. In order to include
the charts package, simply add "sencha-charts" to the requires block in your application's
app.json file. Adding a package name to the requires block directs Cmd to make the package
available to your application.
After making the inclusion, ensure that your application has been rebuilt. Applications may be rebuilt by manually issuing the following command:
sencha app build
You may also activate "app watch":
sencha app watch
Sencha app watch monitors your application's assets and rebuilds when it detects change.
There are three types of base charts:
ext-charts tried to automatically determine the chart type by evaluating the series type. This allowed users to simply set the xtype to 'chart'. However, sencha-charts needs a designated xtype in some circumstances. Cartesian charts are the most commonly used and are mapped to the alias of 'chart'. Setting an xtype of 'chart' will makes the assumption that you want a Bar,Line, Scatter, or Area chart. Other types of charts will require an xtype designation of polar or spacefilling.
Charts can now use either HTML Canvas or SVG to render its contents. The render engine is selected automatically depending on the platform used. Priority is given to the canvas engine due to its performance advantage. SVG is currently only used on Android 4.0+ due to the following bug:
http://code.google.com/p/android/issues/detail?id=37529
That said, charts will look the same regardless of the engine used, though the SVG engine does not support shadows at the moment.
You may force the use of either engine by adding the engine property to the chart's
config. These configs would look like this:
engine: Ext.draw.engine.Canvas
engine: Ext.draw.engine.Svg
During development, you can quickly switch from one engine to another by
appending/removing ?svg=true to/from the URL.
In the past, you may have found yourself using chart's refresh() method to repaint the
chart. We now recommend using chart's redraw() method for this functionality.
Chart's animate config will now default to true. You will need to set animate to false if you intend to disable animations.
The gradients config object now uses slightly different syntax. Any charts using the gradients object will need to be updated as per the following:
Old style
gradients: [{
id: 'gradientId',
angle: 45,
stops: {
0: {
color: '#555'
},
100: {
color: '#ddd'
}
}
}, {
id: 'gradientId2',
angle: 0,
stops: {
0: {
color: '#590'
},
20: {
color: '#599'
},
100: {
color: '#ddd'
}
}
}]
New style
gradients: [{
id: 'gradientId1',
type: 'linear',
angle: 45,
stops: [{
offset: 0,
color: 'red'
}, {
offset: 1,
color: 'yellow'
}]
}, {
id: 'gradientId2',
type: 'radial',
stops: [{
offset: 0,
color: '#555',
}, {
offset: 1,
color: '#ddd',
}]
}]
We have added support for radial gradients, which means that the gradient type is now required in the gradient object.
Chart saving cannot be consistently implemented across all the platforms. Many mobile
devices simply won't allow users to download files. For that reason, the chart.preview()
method should be used instead of chart.download(). Both are new methods for Ext JS 5.
chart.preview() shows a dialog window with an image of the chart inside. The user can
then use their browser's native image saving functionality to download the image.
chart.download()attempts a client-side download of the chart's image. This method currently works exclusively in Chrome at this time.
It is also important to note that the chart.save() method is now deprecated. While in
the deprecated state, chart.save() will disregard the value of type passed to it and the
actual format will be SVG or PNG. This type is dependent on the render engine used. If
chart.save() is called on a device in which downloading is not possible, chart.save()
will result in a chart.preview().
In previous versions of charts, chart.save() generated an SVG document and sent it to a
Sencha server for rasterization. New charts generate a DataURL in the Canvas or SVG
format (depending on the render engine used), so the same approach can be used.
Note: We have not yet upgraded our server-side application with support for the new formats.
Sprite attribute names now mimic Canvas context attributes instead of SVG attributes:
| Old name | New name |
| fill, color | fillStyle |
| stroke | strokeStyle |
| stroke-width | lineWidth |
| stroke-linejoin | lineJoin |
| stroke-miterlimit | miterLimit |
| text-anchor | textAlign |
| opacity | globalAlpha |
| translateX | translationX |
| translateY | translationY |
| rotateRads | rotationRads |
| rotateCenterX | rotationCenterX |
| rotateCenterY | rotationCenterY |
| scaleX | scalingX |
| scaleY | scalingY |
| scaleCenterX | scalingCenterX |
| scaleCenterY | scalingCenterY |
Old attribute names will still be recognized since new attribute names have been given aliases. That said, we highly recommend the use of new attribute names to ensure your application's longevity.
We have also added support for two new attributes: lineDash and lineDashOffset.
lineDash - takes an array of numbers that specify a sequence of dash/space, e.g. [1,1]
or [7,3,3,3].lineDashOffset - specifies how far into the line dash sequence drawing commences.Axis type should now be all lowercase:
axes: [
{
type: 'numeric',
position: 'left',
...
},
{
type: 'category',
position: 'bottom',
...
}
]
Renderers should be defined directly on the axis, not inside the label config as in previous versions:
axes: [{
type: 'numeric',
position: 'left',
// Will make all labels have precision of 1 decimal place
// and have '%' added at the end.
renderer: function (v) { return v.toFixed(1) + '%' },
label: { // no renderer here
fontSize: 14
}
}]
Grid is now disabled by default.
Axes now support the limits config. Example usage can be seen here:
limits: [{
value: 70,
line: {
strokeStyle: 'red',
lineDash: [6, 3],
title: {
text: 'Average temperature (˚F)',
fontSize: 14
}
}
}]
Floating axes are now supported. Floating axis tracks a specified value on another axis that runs in the opposite direction.
Please refer to the docs for the floating config and/or see the following Kitchen Sink
examples:
The Ext JS 5 API focuses on setting maximum and minimum values to manipulate widths and gaps.
These settings allow the chart's bars and columns to fit within the available space. The Ext
JS 4 API set absolute values for the width of bars and columns and let the gaps fill the
rest of the space. You were then allowed you to define the gaps as a ratio of the bar and
column width.
When migrating bar and column width/gap settings to Ext JS 5, you'll want to begin working with the following configs:
highlightCfg config (object) should be used in place of highlight config
(boolean/object), e.g.:
series: {
type: 'pie',
highlightCfg: { // defines a change in series sprite's style that
margin: 30 // happens when series item becomes highlighted
}
}
Notice the difference with the old definition for Pie series:
highlight: {
segment: {
margin: 30
}
}
The color config should be used instead of colorSet config to set series' colors
manually, e.g.: colorSet: ['#82B525', '#ddd'].
shadowAttributes config is no longer supported. But you can define a style instead,
e.g.:
series: {
style: {
shadowColor: 'rgba(0,0,0,0.5),
shadowBlur: 10
}
}
Note: shadows are not supported by the Svg engine Ext.draw.engine.Svg.
Chart's series config is an Array now. That said, chart.series.first() won't work.
Please use:
chart.getSeries()[0]
One should use marker config instead of markerConfig config to define series' markers.
There's no series of type column anymore, one has to use bar series instead, e.g.:
axes: [{
type: 'numeric',
position: 'left',
...
}, {
type: 'category',
position: 'bottom',
...
}],
series: {
type: 'bar',
...
}
In the same vein of column chart, there is no bar type anymore. You'll need to use the
bar series but with flipXY property set to true for horizontal bars.
When flipping the chart, axes positions should be changed accordingly, e.g.:
flipXY: true,
axes: [{
type: 'numeric',
position: 'bottom',
...
}, {
type: 'category',
position: 'left',
...
}],
series: {
type: 'bar',
...
}
labelField: 'name'
config should be used instead of
label: {
field: 'name'
}
There is no axis type radial. Use
axes: [{
type: 'numeric',
position: 'radial',
}, {
type: 'category',
position: 'angular',
}]
instead of:
axes: [{
type: 'Radial',
...
}]
Gauge series do not support themes and have to be styled manually with chart.colors,
series.style and series.subStyle configs.
label config is not yet supported.
label config is not yet supported.
Ext JS | Terms of Use