Writing your first Sencha Touch application – Part3

In this tutorial we will add some interactivity to the list that we have created in Part 1 and Part 2. When the user taps on an item in the list a pop up box will show more information about that person. This is how it will look.

Showing more info on tap

Our list is already showing firstname and lastname of a person. Now, on item tap we need to show let’s say the contact number and address of that person as shown in the figure above. So we need to add the contact and address information to our data array and also reflect the field names in the model. This is how to do it,

Writing your first Sencha Touch application – Part2

Till now we have seen how to create a viewport panel and dock a toolbar on top of the Panel. Lets build the rest of the application. Ok, now we need a List and some contact information that the list will hold.

To create a list we will use the standard Ext.List component class and set properties in its configuration object. This is how to create a list

var contactList = new Ext.List({
                             store: store,
                             itemTpl: itemTemplate,
                             height:"100%"
                        });

A list needs data to display as items and to do so we have the store property. This property defines a Ext.data.Store object that holds the data and the schema that defines the structure of the data. I am using the term schema for the data modelling because it seems to make things familiar to me.

Writing your first Sencha Touch application – Part1

In this tutorial we will build a simple Sencha Touch application that will help you get started with this new Touch Framework. Sencha Touch is all about developing mobile web applications that look like native in iPhone, Android and Blackberry touch devices. It is a JavaScript library that complies to all the latest web standards like HTML5, CSS3. To start with we will be developing a simple contact list that will store contact information. When a particular contact item is clicked/tapped then an overlay will show more information about that person. This is how it will look at the end.

Our application