Skip to content

February 28, 2015

4

Building ExtJs/Highcharts Application with Sencha Cmd 5 Tool

by Joe Kuan

A number of users have asked me how to build ExtJs application with my Highcharts extension using Sencha Cmd tool. I have been ignoring this question with the excuse of way too busy. Now, my new book is done and I am going to address this here. The aim of this article is to demonstrate that the extension does work with sencha command tool.

Lets start off by generating an ExtJs 5 application with the following sencha command:

sencha -sdk extjs5 generate app HighchartsSenchaDemo hcExtJsDemo

Following is the output of the command line:
screen

The next step is to put the Highcharts extension inside the application directory. We can either copy or link the ‘Chart’ directory from the extension:

cd hcExtJsDemo ; ln -s {Highcharts_Sencha path}/Chart .

or

cd hcExtJsDemo ; cp -fr {Highcharts_Sencha path}/Chart .

App.json

The next step is to edit the app.json to tell the sencha command tool where is everything. In this example, we going to the Highcharts library directly from code.highcharts.com instead of bundling into our application. First include the extension’s Chart into the class path:

    /**
     * Comma-separated string with the paths of directories or files to search. Any classes
     * declared in these locations will be available in your class "requires" or in calls
     * to "Ext.require". The "app.dir" variable below is expanded to the path where the
     * application resides (the same folder in which this file is located).
     */
    "classpath": "${app.dir}/app,${app.dir}/Chart",

Then includes all the necessary libraries required by the Highcharts extension:

    "js": [
        {
            "path": "${framework.dir}/build/ext-all-rtl-debug.js"
        },
        {
            "path": "app.js",
            "bundle": true
        },
        {
           "path": "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js",
           "remote": true
        },
        {
           "path": "http://code.highcharts.com/highcharts.js",
           "remote": true
        }
    ],

We must include the jQuery library before the Highcharts. Cut the long story short, Highcharts supports different Javascript framework via adapters and jQuery is one of them. Highcharts now comes with a pure Javascript adapter which means users are not bounded to any frameworks to use Highcharts. However, the Highcharts/ExtJs extension haven’t caught up with that change yet but it’s in the development roadmap.

Create Highcharts demo

For the sake of simplicity, we use a simple & standalone Highcharts demo which creates a simple window with a chart in a single object configuration. For details, see the standalone.js file from the github repository.

Since this is a simple window application, there is no need for viewport which is generated from the sencha app command. Commented the viewport line in app.js as below:

Ext.application({
    name: 'HighchartsSenchaDemo',

    extend: 'HighchartsSenchaDemo.Application'

    // autoCreateViewport: 'HighchartsSenchaDemo.view.main.Main'

    //-------------------------------------------------------------------------
    // Most customizations should be made to HighchartsSenchaDemo.Application. If you need to
    // customize this file, doing so below this section reduces the likelihood
    // of merge conflicts when upgrading to new versions of Sencha Cmd.
    //-------------------------------------------------------------------------
});

Then copies & pastes the standalone demo code into app/Application.js and includes the necessary extension files for the demo. See the following code:

// Only include necessary extension files for a spline graphs demo
Ext.require('Chart.ux.Highcharts');
Ext.require('Chart.ux.Highcharts.Serie');
Ext.require('Chart.ux.Highcharts.SplineSerie');

Ext.define('HighchartsSenchaDemo.Application', {
    extend: 'Ext.app.Application',

    name: 'HighchartsSenchaDemo',

    stores: [
        // TODO: add global / shared stores here
    ],

    launch: function () {
        Ext.define('HighChartData', {
            extend : 'Ext.data.Model',
            fields : [{
                ....
            }]
        });

        var store = Ext.create('Ext.data.Store', {
            model : 'HighChartData',
            proxy : {
                type : 'ajax',
                url : './data/standalone.json',
                .....
            }
        });

        var win = Ext.create('Ext.window.Window', {
            width : 800,
            height : 600,
            ....
            items : [{
                xtype : 'highchart',
                id : 'chart',
                defaultSerieType : 'spline',
                series : [{
                    dataIndex : 'yesterday',
                    name : 'Yesterday'
                }, {
                    ....
                }],
                .....
            }]
        }).show();
    }
});

Build the app

Notice that the data store in this demo loads graph data from a json file (standalone.json) from the directory, ‘data’. We need to add the ‘data’ directory to the final build. We do this by changing the ‘resources’ field in app.json.

    /**
     * Extra resources to be copied along when build
     */
    "resources": [
        "data"
    ],

Finally, we build the sencha app.

~/bin/Sencha/Cmd/5.1.1.39/sencha app build

Here is the screenshot of the Highcharts/ExtJs5 application built from sencha cmd tool.
screen

Advertisements
4 Comments Post a comment
  1. Jags
    Mar 10 2015

    Hi Joe. This worked for me in ExtJS 5 but when I try this in 4.2.2 I get –

    BUILD FAILED
    com.sencha.exceptions.ExBuild: Mixed-Mode x-compile and microload markup is currently unsupported

    What is the solution? Thanks :)

    Reply
  2. Marcus
    May 3 2015

    Any plans for supporting Ext 6 Joe ?

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Note: HTML is allowed. Your email address will never be published.

Subscribe to comments

%d bloggers like this: