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. Mohit says

    I tried executing the code above but i am not getting the output same as yours. I guess there is something missing in the initial declaration of “index.html” file and due to that, nothing is getting done further.

    Please check and reply.

    Thanks

  2. Mohit says

    Ya i checked it and i also tried opening it in safari but its not working. The code where i feel that something is missing is this one :

    senchatouch/1.1.0/sencha-touch.css” rel=”stylesheet” type=”text/css” />

    the second line in the above code is incomplete ie after the tag…Please suggest….if it is a link tag, then also its not working. Please help

  3. Jerome says

    I started looking at Sencha couple hours ago and came across your site. The information and tutorials are very helpful, thank you.

    Question: What tool are you using for your wireframes?

    Thanks again for your time

  4. Kevin says

    Hey Jorge, my code runs well until I get to the “Adding a Sencha Touch toolbar to a panel” part of your tutorial. For some reason when I input that code and try to run it on chrome, my output is just blank. I don’t even see my panel and the “This is a notes list container” text.

    Please check and confirm, thanks!

    Kevin

  5. Heidi C says

    Excellent tutorial! Having a problem: adding 2 notes and then going back and deleting the first note, then quitting and reloading the app into the browser causes a ‘ Uncaught TypeError: Cannot read property ‘id’ of null’.
    It looks like the problem might be that a second reference is created to the 1st note when the 2nd note is added but only 1 of those references is removed when the note is deleted?? I’m checking the javascript console and can see this happening under localstorage. I’m a very noob so it might just be me. Will dig a bit deeper..

  6. Kumana says

    Hi Jorge,

    Nice tutorial. I have a question on how to extend this to a larger application structure.

    If i were to put the notesListToolbar, notesListContainer and viewport each in seperate js files, how can i call them within launch() function.

    Thanks,

    Kumana

  7. Philipp says

    Hey Jorge,
    I have the same problem as Kevin as soon i reach the point with adding a Sencha Touch toolbar to a panel i only get a white screen. I’m using the android emulator 4.0.1. I checked when i comment out the line with the dockedItems i get not a white screen but the panel is missing

  8. Patrick says

    Hey Jorge,

    Fantastic set of articles. I was frustrated last night as I couldnt get things to work but I think that might have been the bottle of wine I was polishing off while watching TV and trying to do your tutorial ;)

    Today, with no wine and not watching TV at the same time things have come together farily quickly.

  9. 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

    • 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.

  10. 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

Leave a Comment

Your email address will not be published. Required fields are marked *