O'Reilly logo

Learning Ext JS 4 by Armando Gonzalez, Crysfel Villa

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Enhancing our application with charts

We are going to add some charts to our invoices application to see how the invoices are doing each month. First we need to define the store that will populate our chart:

/**
 * @class MyApp.store.invoices.Summaries
 * @extends Ext.data.Store
 * @author Armando Gonzalez <iam@armando.mx>
 * This is the definition of our Invoices summary store
 */
Ext.define('MyApp.store.invoices.Summaries', {
  extend: 'Ext.data.Store', 
    fields: ['invoice', 'data1', 'data2', 'data3', 'data4', 'data5', 'data6', 'data7', 'data9'],
    autoLoad: true,
proxy    : {
  type  : 'ajax',
url  : 'serverside/invoices/summary.json',
      reader  : {
            type  : 'json',
          root  : 'data'
      }
    }
});

Once we have defined the summaries store, we define the line chart:

/** * @class ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required