Mobile Zone is brought to you in partnership with:

Jorge is the author of three software development books: "Building a Sencha Touch Application", "How to Build a jQuery Mobile Application", and the "Ext JS 3.0 Cookbook". He runs a software development and developer education shop that focuses on mobile, web and desktop technologies. Jorge is a DZone MVB and is not an employee of DZone and has posted 50 posts at DZone. You can read more from them at their website. View Full User Profile

How to Create an Executive Dashboard Using Sencha Touch, Part 1

01.14.2014
| 6556 views |
  • submit to reddit

In this tutorial you will build a Sencha Touch app based on an Executive Dashboard prototype that I put together some time ago. The app renders a number of charts with performance indicators for a hypothetical business.

dashboard-2-small

This Executive Dashboard was conceived originally as a jQuery Mobile app, but I thought it would be valuable to port it to Sencha Touch. Here are the main topics that you will learn while building it:

  • How to create a Sencha Touch layout for a dashboard application to be viewed on a tablet device.
  • How to configure and use the Sencha Touch Cartesian Chart.
  • How to feed Sencha Touch charts with data sent from the server.
  • How to update Sencha Touch charts on demand.

Designing the main view

The first step you will take is to build a mock up of the user interface. This will help you define the look and feel of the app, and decide which Sencha Touch components you need to use to create this UI.

The Executive Dashboard consists of a single screen with a title bar and four rectangular regions each showing a chart. The title bar will contain a “Refresh” button. Each of the four areas for the charts will contain a chart, preceded by a label that will function as a title for the chart.

Translating this to Sencha Touch components, as reflected in the figure below, the app’s viewport will be filled with a Container. This container will use a vbox layout to host a top-docked Titlebar component, and two containers. The two containers will give you two rows of equal height, highlighted as green rectangles in the figure.

dashboard-3-small

Each row will in turn use an hbox layout to host two containers, which will give you two columns of equal width. This combination of rows and columns results in a 2×2 matrix. Each of the matrix’s cells, depicted as orange rectangles in the figure, will host a Container with the chart title, and a Chart.

Creating a skeleton app with Sencha Command

Now that you have an approach to the layout of the app’s only view, you can move on to the construction phase. Let’s take care of generating a skeleton app that you can use as a starting point for this Executive Dashboard.

To create a skeleton app, follow these steps:

  1. Install Sencha Cmd.
  2. Install Compass.
  3. Download the Sencha Touch SDK.
  4. Open a Terminal or Command window in your Sencha Touch SDK directory.
  5. In your terminal window, run: sencha generate app -path=”c:\projects\senchatouch\dashboard” -name dashboard

This will produce a Sencha Touch application in the c:\projects\senchatouch\dashboard directory:

dashboard-4

You can browse to the index.html file in your favorite Webkit browser and verify that the app comes up on the screen.

Building the main view

To create the main view of the Executive Dashboard, you will modify the main View of the skeleton app. In the app/view directory, open the main.js file and replace its code with the following:

Ext.define("dashboard.view.Main", {
    extend: "Ext.Container",
    requires: [
        "Ext.TitleBar"
    ],
    alias: "widget.main",
    config: {
        layout: {
            type:"vbox"
        },
        items: [
            {
                xtype: "titlebar",
                docked: "top",
                title: "Executive Dashboard",
                items: [
                    {
                        iconCls: "refresh",
                        align: "right",
                        handler: function () {
                            var parent = this.up("titlebar").getParent();
                            parent.fireEvent("refreshRequestCmd", parent);
                        }
                    }
                ]
            },            
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                html: "First row"
            }            ,
            {
                xtype: "container",
                flex: 1,
                layout: "hbox",
                html: "Second row"
            }                
        ]
    }
});

The app’s main View is an instance of the Ext.Container class. For now, the view has a Titlebar and a couple of child containers.

Using a bvox layout and docking the Titlebar to the top of its parent, allows you to place the two child containers one on top of the other. Setting the flex config of each container to 1 makes them both have the same height.

Published at DZone with permission of Jorge Ramon, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)