This chapter starts with an introduction of Sencha's Ext JS. Since the Ext JS framework covers a broad range of features, it comprises a large collection of classes. Therefore, a quick guide on a small set will be given, especially for the user interface components likely to be used with Highcharts. Then, we will learn which Highcharts extension we have for Ext JS and how to create a Highcharts graph within Ext JS. We will also learn about a small set of APIs provided by the extension. After that, we will use network data to build a simple application to demonstrate how the Ext JS components can interact with Highcharts. Finally, we will have a brief look at a commercial Ext JS application working together with Highcharts. In this chapter, we will cover the following topics:
- Introducing and giving a quick tutorial on Sencha Ext JS classes
- Introducing the Highcharts extension for Ext JS
- Demonstrating how to convert a working Highcharts configuration for the extension
- Preparing the Ext JS JsonStore object for the extension
- Describing APIs provided by the extension module
- Illustrating how to create an Ext JS application with the Highcharts extension
Sencha's Ext JS is one of the most comprehensive Rich Internet Application (RIA) frameworks on the market. An RIA framework can produce a web frontend that behaves like a desktop application. Ext JS supports many features such as proxy storage, charting, managing SVG, tabs, toolbars, a myriad of different form inputs, and many, many others. There are other popular RIA frameworks, such as the Java-based Google Web Toolkit (GWT) and Python-based Dojo. Both frameworks can be integrated with Highcharts via third-party contributed software.
Note
See http://www.highcharts.com/download under the section Third Party Implementation for the full list of software contributed by other developers.
The Highcharts extension was originally written by Daniel Kloosterman for Ext JS 2+ as an adapter, as it didn't support any charts. In Ext JS 3, it started adopting the YUI charting library as the charting solution. However, the charts lacked features and style, and the main drawback was that they required Flash to run. Since Ext JS 3.1, I have been maintaining the Highcharts extension and added features, such as support for donut charts and enhancements for some of the APIs.
Although Ext JS 4 comes with its own chart library, some users still prefer Highcharts over Ext JS 4 charts for style and flexibility. Moreover, Ext JS 4 can run alongside version 3 codes, so it is desirable to enhance the extension to natively support Ext JS 4, which I have done. The extension implementation has always been to follow the original approach, which is to preserve the use of Highcharts configurations as much as possible.
At the time of writing, Ext JS 5 has just been released and the changes from Ext JS 4 to Ext JS 5 are not as drastic as from Ext JS 3 to Ext JS 4. The Highcharts extension has been updated to be fully compatible with both Ext JS 4 and 5. In this chapter, we will focus on working with Ext JS 5. All the examples are simply from the previous edition, which is based on Ext JS 4, and they are updated to work with Ext JS 5.
There are demos online at http://joekuan.org/demos/Highcharts_Sencha/desktop.extjs5/ and the extension can be downloaded from http://github.com/JoeKuan/Highcharts_Sencha/.
Unlike jQuery UI, an Ext JS application is programmed in pure JavaScript, without the need to collaborate with HTML markup or fiddle with particular CSS classes (strictly speaking, there are times when it is necessary to interface with HTML and CSS, but it is not common and is only in small doses). This empowers programmers to focus on developing the entire web application in a single language and to concentrate on application logic. That also pushes the server-side development to reside in data operations only, unlike some approaches that use server-side language with HTML and CSS to serve client pages.
Technically, JavaScript does not have classes: function itself is an object. The Ext JS framework provides access to its components through the class approach, organized in a hierarchical manner. In this chapter, we will use the word "class" to refer to Ext JS classes.