Developing Ext JS Charts in NetBeans IDE

I took my first tentative steps into the world of Ext JS charts today, in NetBeans IDE 7.4. Click to enlarge the image.

I will make a screencast soon showing how charts such as the above can be created with NetBeans IDE and Ext JS. Setting up Ext JS is easy in NetBeans IDE because there's a JavaScript library browser, by means of which I can browse for the Ext JS libraries that I need and then NetBeans IDE sets up the project for me.

The JavaScript code shown above comes directly from here:

http://www.quizzpot.com/courses/learning-ext-js-3/articles/chart-series

Here is app.js:

Ext.chart.Chart.CHART_URL = 'js/libs/extjs/resources/charts.swf';
var store = new Ext.data.JsonStore({
    fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
    data: [
        {year: 2004, comedy: 39000000, action: 53890000, drama: 38450000, thriller: 32060000},
        {year: 2005, comedy: 34000000, action: 23890000, drama: 18450000, thriller: 20060000},
        {year: 2006, comedy: 56703000, action: 38900000, drama: 12650000, thriller: 21000000},
        {year: 2007, comedy: 42100000, action: 50410000, drama: 25780000, thriller: 23040000},
        {year: 2008, comedy: 38910000, action: 56070000, drama: 24810000, thriller: 26940000}
    ]
});
var chart = new Ext.chart.ColumnChart({
    store: store, 
    xField: 'year',
    yField: 'comedy'
});
Ext.onReady(function() {
    var win = new Ext.Window({
        title: 'Chart series example',
        width: 550,
        height: 320,
        layout: 'fit',
        items: chart
    });
    win.show();
});

The index.html is as follows:

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="js/libs/extjs/resources/css/ext-all.css"/>
        <script src="js/libs/ext-core/ext-core.js"></script>
        <script src="js/libs/extjs/adapter/ext/ext-base-debug.js"></script>
        <script src="js/libs/extjs/ext-all-debug.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
    </body>
</html>

More info on Ext JS:

http://docs.sencha.com/extjs/4.1.3/

By the way, quite a few other articles are out there on Ext JS and NetBeans IDE, such as these, which I will be learning from during the coming days:

Comments:

Post a Comment:
  • HTML Syntax: NOT allowed
About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
12
13
14
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today