Writing your first sencha touch application part2


Published on

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

Published in: Technology
1 Comment
1 Like
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Writing your first sencha touch application part2

  1. 1. Writing your first Sencha Touch application – Part2Till now we have seen how to create a viewport panel and dock a toolbar on top of the Panel. Lets build the rest ofthe 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. Thisis how to create a listvar 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 definesa Ext.data.Storeobject that holds the data and the schema that defines the structure of the data. I am using the termschema for the data modelling because it seems to make things familiar to me.Schema – Models and StoresI have briefly talked about Stores above. Ext.data.Store objects are actually like your client side database. It will holddata that our list will display. For eg. it will hold the first names and last names of the people. Now stores also definemodel objects which tells the store about the structure of the data to hold. Model is the schema that I was talkingabout. 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. 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 thename of the fields which in this case are firstName and lastName. Then I have defined a data array which holds thedata for our list. It is an array of Model objects and note that same field names have been used from our Modelregistered 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 remoteservers. You can make Ajax calls and receive XML, JSONP data and load it in your store via a Proxy. Well lets keepthis aside for now. I will come up with something that will showcase dynamic data loading using proxies.TemplatesNext thing to do is to define how your list items look like and what fields defined in the Model will actually be displayedin each item. To do so we have to use the Ext.XTemplate class. By using it we can define a template and put customstyles(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 havenot used any div or custom css to style the items. The <tpl for=” . “> is for looping through the items of the data
  3. 3. array, for = ” . ” means that the looping will start from the root. The data array that I I have mentioned is a linear arrayso there are no children, the thing that would have been in a typical XML document. To add custom styles you couldhave written something like this,var itemTemplate = new Ext.XTemplate( <tpl for=".">, <div style="color:#fff;background-color:#ff0000;">, {firstName} {lastName}, </div>, </tpl> );IntegratingNow 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 thelist 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 beadded 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. 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’sit, our first Sencha Touch application is ready. Run your code and you should be able to see a list of people’s contactinformation as shown below, Sencha Touch listHere is the link to the demo http://jbk404.site50.net/sencha/gettingstarted/. Try opening it in your iPhone. If you do nothave one try it out here http://www.iphonetester.com/.Adding interactivityNext thing is to add interactivity to our list. Lets say, when a user taps on one of the contact he should be able to seemore 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/