Writing your first Sencha Touch 1 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.

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 Store and 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'},
	{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 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',
                            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,

Contact List
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 : https://jbkflex.wordpress.com/2011/07/30/writing-your-first-sencha-touch-application-part1/

One thought on “Writing your first Sencha Touch 1 application – Part2

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s