A tutorial on how to get started with creating a cross platform mobile web application that looks like native application using Sencha Touch framework. This is the part 2 of the 3 series tutorial. All the posts are posted in my blog http://jbkflex.wordpress.com

1. 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.Storeobject 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.
Schema – Models and Stores
I have briefly talked about Stores above. Ext.data.Store objects are actually like your client side database. It will hold
data that our list will display. For eg. it will hold the first names and last names of the people. Now stores also define
model objects which tells the store about the structure of the data to hold. Model is the schema that I was talking
about. Every row in a store will be an item in the list. And every row in a store is a Model instance.
Both Storeand Model are part of Ext.data package. This is how to do so,
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var data = [
{firstName: 'Pearlie', lastName: 'White'},
{firstName: 'John', lastName: 'Suttle'},
{firstName: 'Javier', lastName: 'Henderson'},
{firstName: 'Young', lastName: 'Alverd'},
{firstName: 'Pearlie', lastName: 'white'},

2. {firstName: 'Billy', lastName: 'Artega'},
{firstName: 'Dona', lastName: 'Bigglker'},
{firstName: 'Alfred', lastName: 'Blackburn'},
{firstName: 'Trenton', lastName: 'Bollinger'},
{firstName: 'Tom', lastName: 'Foose'}
];
var store = new Ext.data.Store({
model: 'Contact',
data: data
});
As you can see we have registered a Model with Ext.regModel() and given it a name Contact, fields specify the
name of the fields which in this case are firstName and lastName. Then I have defined a data array which holds the
data for our list. It is an array of Model objects and note that same field names have been used from our Model
registered earlier. The model and the data are then specified in the Store as you can see. I have used inline or hard-
coded data for my Store. There are other options available as well. You can load data in your store from remote
servers. You can make Ajax calls and receive XML, JSONP data and load it in your store via a Proxy. Well lets keep
this aside for now. I will come up with something that will showcase dynamic data loading using proxies.
Templates
Next thing to do is to define how your list items look like and what fields defined in the Model will actually be displayed
in each item. To do so we have to use the Ext.XTemplate class. By using it we can define a template and put custom
styles(CSS) and HTML elements that will wrap the data. This is how to do so,
var itemTemplate = new Ext.XTemplate(
'<tpl for=".">',
'{firstName} {lastName}',
'</tpl>'
);
In our case we have defined a template that will display the firstName and lastName of the contacts. Note that I have
not used any div or custom css to style the items. The <tpl for=” . “> is for looping through the items of the data

3. array, for = ” . ” means that the looping will start from the root. The data array that I I have mentioned is a linear array
so there are no children, the thing that would have been in a typical XML document. To add custom styles you could
have written something like this,
var itemTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div style="color:#fff;background-
color:#ff0000;">',
'{firstName} {lastName}',
'</div>',
'</tpl>'
);
Integrating
Now that we have our Model, Data, Store and Template ready, lets bind these to our list. This is how to do so,
var contactList = new Ext.List({
store: store,
itemTpl: itemTemplate,
height:"100%"
});
Its simple isn’t it. Just name the store and item template objects in the properties. A height of 100% means that the
list will occupy the entire height of the application screen. Percentages are allowed.
Our list is ready now. So need to add this to our viewport panel. Remember a list is only a component. It needs to be
added to a container for display. This is how you can do it,
new Ext.Panel({
fullscreen:true,
layout:'fit',
dockedItems:[{xtype:'toolbar', title:'Contact List'}],
dock:'top',
scroll:'vertical',

4. items:[contactList]
});
Note the items property. It is an array of all the items that the panel will hold. Add your contact list object to it. That’s
it, our first Sencha Touch application is ready. Run your code and you should be able to see a list of people’s contact
information as shown below,
Sencha Touch list
Here is the link to the demo http://jbk404.site50.net/sencha/gettingstarted/. Try opening it in your iPhone. If you do not
have one try it out here http://www.iphonetester.com/.
Adding interactivity
Next thing is to add interactivity to our list. Lets say, when a user taps on one of the contact he should be able to see
more information about the person in a pop up. Lets keep this for the next part. Part3 is ready. Read it here.
Link to part 1 : http://jbkflex.wordpress.com/2011/07/30/writing-your-first-sencha-touch-application-part1/