Writing a Sencha Touch Application, Part 1

In this series we will create a Sencha Touch application that allows its users to take notes and store them on the device running the app. Along the way, we will dive into the following areas:

  • Building blocks of a Sencha Touch application
  • Rendering information using a list view
  • Editing information using form elements
  • Client-side data persistence across browser sessions
  • Navigation in a multi-view application

Sencha Touch Application

Application features

We’re after this simple feature set:

  • Ability to create notes
  • Ability to edit existing notes
  • Ability to delete notes
  • Ability to persist notes on the device running the application, across browser sessions

With these features in mind, let’s talk visual design.

Designing the main views

The first thing we need is a way for our users to create and edit notes. We can do this with a form, which we will call Note Editor, that will look just like this mock-up:

How would you build the Note Editor using Sencha Touch components? Take a look at this:

We also need a view that renders a list of the existing notes. This Notes List will be the main view of the application, and it will need to be connected with the Note Editor. This is how the Notes List should look:

And these are the Sencha Touch components we will use:

There’s one additional component that, although not visible, is vital to the application. This component will function as the viewport of the app, and it will take care of rendering and managing the navigation between the Notes List and the Note Editor. To play this role, we will choose a Panel configured with a card layout, where the Notes List and the Note Editor will be the layout’s cards:

Building blocks of a Sencha Touch application

Three different files will host the pieces of our application: index.html, app.js and app.cs:

Index.html is the file used to launch the app. In this file we need to include references to the Sencha Touch framework, as well as the app.js and app.cs files:

<script src="../../../senchatouch/1.1.0/sencha-touch-debug.js" type="text/javascript"></script>
<link href="../../../senchatouch/1.1.0/sencha-touch.css" rel="stylesheet" type="text/css" />
<link href="app.css" rel="stylesheet" type="text/css" />
<script src="app.js" type="text/javascript"></script>

App.js and app.css will in turn contain the javascript source and the styles used by the app.

In the app.js file, the very first thing we will do is instantiate an Application:

var App = new Ext.Application({
    name : 'NotesApp',
    useLoadMask : true,
    launch : function () {

    }
})

The Ext.Application class represents a Sencha Touch application. As described in the documentation for the Ext.Application class, instantiating a new application automatically creates a global NotesApp variable, along with the following namespaces:

  • NotesApp
  • NotesApp.views
  • NotesApp.controllers
  • NotesApp.models
  • NotesApp.stores

The launch() function is only run once. This is where we will create our application’s viewport:

launch: function () {

	NotesApp.views.viewport = new Ext.Panel({
		fullscreen: true,
		html:'This is the viewport'
	});
}

Our app’s viewport is an Ext.Panel. This panel will host the Notes List and Note Editor. When we set its fullscreen config option to true, we are instructing the panel to take up all the width and height available. This will also set the monitorOrientation config to true, enabling the panel to listen to orientation change events.

Monitoring orientation changes is a desirable feature for our viewport, as we want it to correctly render the Notes List and the Note Editor when the device’s orientation changes.

If you navigate to the index.html page using a device or simulator, our app will look like this:

Creating the Notes List container

The Notes List is the view that will be presented to our users when they launch the application. As defined in the mock-up, this view will consist of a toolbar and a list of notes. Let’s build it one step at a time.

First, we need the panel that will contain both the toolbar and the list of notes:

We will call this panel notesListContainer, and this is how we will instantiate it:

NotesApp.views.notesListContainer = new Ext.Panel({
    id : 'notesListContainer',
    layout : 'fit',
    html: 'This is the notes list container'
});

Before we add the toolbar and notes list to this panel, let’s render it within the viewport like so:

var App = new Ext.Application({
    name: 'NotesApp',
    useLoadMask: true,
    launch: function () {

        NotesApp.views.notesListContainer = new Ext.Panel({
            id : 'notesListContainer',
            layout : 'fit',
            html: 'This is the notes list container'
        });

        NotesApp.views.viewport = new Ext.Panel({
            fullscreen : true,
            layout : 'card',
            cardAnimation : 'slide',
            items: [NotesApp.views.notesListContainer]
        });
    }
})

Note how we’ve added the layout and cardAnimation config options to the viewport. This is because we will use a card layout, where the Notes List container and the Note Editor are the cards. As in many popular mobile apps, these cards will be displayed using a slide animation.

A quick check on the simulator or device should confirm that the Notes List container is present:

What are we missing in this view? The toolbar and the notes list. We will take care of the toolbar next.

Adding a Sencha Touch toolbar to a panel

We can define the toolbar as follows. This is a plain toolbar, we won’t be adding buttons to it for now:

NotesApp.views.notesListToolbar = new Ext.Toolbar({
    id: 'notesListToolbar',
    title: 'My Notes'
});

Adding the toolbar to our notesListContainer is a simple step. We just need to use the dockedItems config option:

NotesApp.views.notesListContainer = new Ext.Panel({
    id: 'notesListContainer',
    layout: 'fit',
    html: 'This is the notes list container',
    dockedItems: [NotesApp.views.notesListToolbar]
});

Another quick check on the simulator or device should confirm that the toolbar is correctly rendered:

What’s next

In the next article of this series we will add the notes list to the view we just created, and we will move on to adding the ability to create and edit notes.

Here’s the source code for the application as it stands at this point:

var App = new Ext.Application({
    name: 'NotesApp',
    useLoadMask: true,
    launch: function () {

        NotesApp.views.notesListToolbar = new Ext.Toolbar({
            id: 'notesListToolbar',
            title: 'My Notes'
        });

        NotesApp.views.notesListContainer = new Ext.Panel({
            id: 'notesListContainer',
            layout: 'fit',
            html: 'This is the notes list container',
            dockedItems: [NotesApp.views.notesListToolbar]
        });

        NotesApp.views.viewport = new Ext.Panel({
            fullscreen: true,
            layout: 'card',
            cardAnimation: 'slide',
            items: [NotesApp.views.notesListContainer]
        });
    }
})

Makes sense? What do you think?

The rest of the series:

Want To Learn More?

My Sencha Touch books will teach you how to create an application from scratch.

Comments

  1. sushma says

    hi can u please tell me difference when to use ext.application and when to use onsetup , what is the main difference b/w them

    • Jorge says

      Both work as ways of creating applications. The application function is more appropriate if you are going to use MVC (most times you will), as it can automatically sets up many of the MVc components of the app.

  2. Amardeep says

    when i generate /var/www/touch-2.3.0$ sencha generate app appy ../appy
    an app only two folders are created App and resources , the terminal fails to create the rest of the directories like build packages and sdk folder < looking forward for ur reply
    regards ,
    amardeep