Reporting

Exclusive offer: get 50% off this eBook here
Ext JS Data-driven Application Design

Ext JS Data-driven Application Design — Save 50%

A step-by-step guide to building a user-friendly database in Ext JS using data from an existing database with this book and ebook

£13.99    £7.00
by Kazuhiro Kotsutsumi | December 2013 | Open Source

In this article, by Kazuhiro Kotsutsumi, the author of Ext JS Data-driven Application Design, we will create the report and display it with four different types of graphs on the dashboard.

(For more resources related to this topic, see here.)

Creating a pie chart

First, we made the component test CT for display purposes, but now let's create the CT to make it run.

We will use the Direct function, so let's prepare that as well. In reality we've done this already.

Duplicate a different app.html and change the JavaScript file like we have done before. Please see the source file for the code: 03_making_a_pie_chart/ct/dashboard/pie_app.html.

Implementing the Direct function

Next, prepare the Direct function to read the data.

First, it's the config.php file that defines the API. Let's gather them together and implement the four graphs (source file: 04_implement_direct_function/php/config.php).

.... 'MyAppDashBoard'=>array( 'methods'=>array( 'getPieData'=>array( 'len'=>0 ), 'getBarData'=>array( 'len'=>0 ), 'getLineData'=>array( 'len'=>0 ), 'getRadarData'=>array( 'len'=>0 ) ) ....

Next, let's create the following methods to acquire data for the various charts:

  • getPieData
  • getBarData
  • getLineData
  • getRadarData

First, implement the getPieData method for the pie chart. We'll implement the Direct method to get the data for the pie chart. Please see the actual content for the source code (source file: 04_implement_direct_function/php/classes/ MyAppDashBoard.php ).

This is acquiring valid quotation and bill data items. With the data to be sent back to the client, set the array in items and set up the various names and data in a key array. You will now combine the definitions in the next model.

Preparing the store for the pie chart

Charts need a store, so let's define the store and model (source file: 05_prepare_the_store_for_the_pie_chart/app/model/ Pie.js).

We'll create the MyApp.model.Pie class that has the name and data fields. Connect this with the data you set with the return value of the Direct function. If you increased the number of fields inside the model you just defined, make sure to amend the return field values, otherwise it won't be applied to the chart, so be careful. We'll use the model we made in the previous step and implement the store (source file: 05_prepare_the_store_for_the_pie_chart/app/model/ Pie.js).

Ext.define('MyApp.store.Pie', { extend: 'Ext.data.Store', storeId: 'DashboardPie', model: 'MyApp.model.Pie', proxy: { type: 'direct', directFn: 'MyAppDashboard.getPieData', reader: { type: 'json', root: 'items' } } })

Then, define the store using the model we made and set up the Direct function we made earlier in the proxy.

Creating the View

We have now prepared the presentation data. Now, let's quickly create the view to display it (source file: 06_making_the_view/app/view/dashboard/Pie.js).

Ext.define('MyApp.view.dashboard.Pie', { extend: 'Ext.panel.Panel', alias : 'widget.myapp-dashboard-pie', title: 'Pie Chart', layout: 'fit', requires: [ 'Ext.chart.Chart', 'MyApp.store.Pie' ], initComponent: function() { var me = this, store; store = Ext.create('MyApp.store.Pie'); Ext.apply(me, { items: [{ xtype: 'chart', store: store, series: [{ type: 'pie', field: 'data', showInLegend: true, label: { field: 'name', display: 'rotate', contrast: true, font: '18px Arial' } }] }] }); me.callParent(arguments); } });

Implementing the controller

With the previous code, data is not being read by the store and nothing is being displayed.

In the same way that reading was performed with onShow, let's implement the controller (source file: 06_making_the_view/app/controller/DashBoard.js):

Ext.define('MyApp.controller.dashboard.DashBoard', { extend: 'MyApp.controller.Abstract', screenName: 'dashboard', init: function() { var me = this; me.control({ 'myapp-dashboard': { 'myapp-show': me.onShow, 'myapp-hide': me.onHide } }); }, onShow: function(p) { p.down('myapp-dashboard-pie chart').store.load(); }, onHide: function() { } });

With the charts we create from now on, as we create them it would be good to add the reading process to onShow. Let's take a look at our pie chart which appears as follows:

Ext JS Data-driven Application Design

Summary

You must agree this is starting to look like an application!

The dashboard is the first screen you see right after logging in. Charts are extremely effective in order to visually check a large and complicated amount of data. If you keep adding panels as and when you feel it's needed, you'll increase its practicability. This sample will become a customizable base for you to use in future projects.

Resources for Article:


Further resources on this subject:


Ext JS Data-driven Application Design A step-by-step guide to building a user-friendly database in Ext JS using data from an existing database with this book and ebook
Published: December 2013
eBook Price: £13.99
Book Price: £21.99
See more
Select your format and quantity:

About the Author :


Kazuhiro Kotsutsumi

Kazuhiro Kotsutsumi was born in Sapporo, Japan in 1979. He started using C/C++ at the age of 14 and proceeded to learn MASM, Delphi, ActionScript, PHP, C#, Perl, and so on.

After working for a web systems development company while enrolled at college, he began programming built-in functions for cell phones.

Having worked as a Project Manager and a freelance programmer for one year, he established his company Xenophy CO., LTD in 2006.

Xenophy has always offered a variety of IT web solutions and has become synonymous with the promotion and expansion of Sencha in Japan.

Currently, Xenophy is a Sencha Reseller and the official Sencha training partner in Japan. In September 2013, Xenophy announced the launch of Sencha Official Training in Japan, a fully localized course with Sencha's official training materials adapted for the Japanese market.

He has already published two Sencha Ext JS guides in Japanese, including Sencha EXT JS 4 – A Practical Developing Guide and he recently co-authored a Sencha Touch guide.

Books From Packt


Ext JS 4 Plugin and Extension Development
Ext JS 4 Plugin and Extension Development

Ext JS 4 First Look
Ext JS 4 First Look

Learning Ext JS 3.2
Learning Ext JS 3.2

Instant Ext JS Starter [Instant]
Instant Ext JS Starter [Instant]

Mastering Ext JS
Mastering Ext JS

Learning Ext JS
Learning Ext JS

Ext JS 4 Web Application Development Cookbook
Ext JS 4 Web Application Development Cookbook

Enterprise Application Development with ExtJS and Spring
Enterprise Application Development with ExtJS and Spring

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software