Skip to content

March 14, 2015

1

Building ExtJs/Highcharts Application with Sencha Cmd 4 Tool

by Joe Kuan

Here is a blog showing you how to build application with the Highcharts extension using Sencha Cmd 4 tool. First of all, we generate ExtJs 4 application skeleton with the following command example:

~/bin/Sencha/Cmd/4.0.4.84/sencha -sdk extjs4 generate app SenchaCmd4Demo sc4demo

Next we copy (don’t use symbolic link) the whole ‘Chart’ directory into the application directory.

cd sc4demo
cp -fr {path}/{to}/Highcharts_Sencha/Chart .

Then we need to edit app.classpath in .sencha/app/sencha.cfg file to inform sencha cmd tool to include the Chart directory

# The name of the application
app.name=SenchaCmd4Demo

# The name of the framework used by the application (ext / touch)
app.framework=ext

# The path(s) to application javascript sources (comma separated)
app.classpath=${app.dir}/app,${app.dir}/app.js,${app.dir}/Chart

# Output location for application build artifacts
app.build.dir=${workspace.build.dir}/${app.name}

The Highcharts extension requires Highcharts and jQuery libraries. The only way to include external libraries via Sencha Cmd 4 is to manually edit the generated index.html file. As long as we include external libraries outside the x-compile and x-bootstrap meta tags, they shouldn’t get overwritten. The following is the modified index.html content with the external libraries.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>SenchaCmd4Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <!-- <x-compile> -->
        <!-- <x-bootstrap> -->
            <link rel="stylesheet" href="bootstrap.css">
            <script src="ext/ext-dev.js"></script>
            <script src="bootstrap.js"></script>
        <!-- </x-bootstrap> -->
        <script src="app.js"></script>
    <!-- </x-compile> -->
</head>
<body></body>
</html>

The final task is to edit app.js and app/Application.js the same way as in “Building ExtJs/Highcharts Application with Sencha Cmd 5 Tool”. The only additional change is the config option name in Store reader class. In ExtJs 4, the data reader class, Reader, uses config option, root, instead of rootProperty as in ExtJs 5.

After that, then we can do the final build like:

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

Here is the screenshot of the build application:
screen

Advertisements
1 Comment Post a comment
  1. jags
    Mar 14 2015

    Thanks Joe. You rock!

    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: