Writing your first sencha touch application part3


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 3 of the 3 series tutorial. All the posts are posted in my blog http://jbkflex.wordpress.com

Published in: Technology, Design
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 part3

  1. 1. Writing your first Sencha Touch application – Part3In this tutorial we will add some interactivity to the list that we have created in Part 1 and Part 2. When the user tapson 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 tapOur list is already showing firstname and lastname of a person. Now, on item tap we need to show let’s say thecontact number and address of that person as shown in the figure above. So we need to add the contact and addressinformation to our data array and also reflect the field names in the model. This is how to do it, Ext.regModel(Contact, { fields: [firstName, lastName, contactno, address] });
  2. 2. var data = [ {firstName: Pearlie, lastName: White, contactno:011-9865460,address:365-Andrews Street, CA}, {firstName: John, lastName: Suttle, contactno:011-7658740,address:Donut Avenue, Bills Palace, Washington} ]Note the new fields contactno and address added to our model and data array. Also we have put some newinformation for these fields. This is all the changes that we have to make in our data model. Next we will have to adda event listener to our list and also make a pop-up to display the data.Listening to ItemtapLets register an event listener to our list so that it can listen to item tap events. This is how it is called in mobiledevices, a click is an item tap. Luckily, Ext.List class defines the on method to register an event listener and alsodefines the itemtap event.contactList.on("itemtap", function(dataView,index,item,e){ });So, we have added the on method and registered the itemtap event listener to our list. The on method takes twoparameters, first one defines the event type which is itemtap in this case. There are other event types defined for list,you can find them all in the Sencha Touch API docs. The second parameter is a function that is invoked every timethere is an itemtap event generated. The function takes four parameters.dataView: a Ext.DataView object. DataView uses an Ext.XTemplate as its internal templating mechanism, and isbound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect thechangesindex: index of the item clicked in the list. Starts from 0item: the data item clicked. It is an objecte: event objectSo we have the skeleton in place, lets put some flesh. Inside the function we will write code to show the pop up thatwill contain the details for the person. To make a pop up we will use a Ext.Panel class instance and set it to be modaland a floating dialog. Also before doing that we need to parse the data from the item clicked upon and display insidethe pop up. The next code snippet shows it,contactList.on("itemtap",function(dataView,index,item,e){var first_name = dataView.store.getAt(index).data.firstName;var last_name = dataView.store.getAt(index).data.lastName;var contact = dataView.store.getAt(index).data.contactno;var address = dataView.store.getAt(index).data.address;
  3. 3. });Note, how I have extracted the firstName, lastName, contactno and address from the item clicked. I have used thedataView and index to do so. From the dataView object I have accessed the store instance. Store definesagetAt(index) method to get the data item at a particular index. And then accessed the properties by their names asdefined in the Model. This way I have accessed all the information I need. Now, lets display them in a pop-up.contactList.on("itemtap",function(dataView,index,item,e){ var first_name =dataView.store.getAt(index).data.firstName; var last_name = dataView.store.getAt(index).data.lastName; var contact = dataView.store.getAt(index).data.contactno; var address = dataView.store.getAt(index).data.address; //creating a pop-up overlay box this.overlay = new Ext.Panel({ modal:true, centered:true, floating:true, width: 250, height:250, styleHtmlContent:true, dockedItems:[{xtype:toolbar, title:first_name + " "+ last_name}], //displays the title bar dock:top, html:<div style="margin-bottom:10px;"><b>Contact:</b> + contact + "</div><div><b>Address: </b><br/>" + address + "</div>" });I have created a new instance of a Ext.Panel class and set modal and floating to true. This will ensure that thePanel will be a modal dialog. Also note some other important properties, centered: sets the window to thecenter,width and height are as defined. Setting styleHtmlContent to true ensures that Sencha will take care of
  4. 4. styling the components inside your panel by adding CSS styles automatically. Also we have docked a toolbar on topand set its title to show the firstname and lastname. We have discussed about docked items in the earlier parts. Theimportant property here is html, by using it we can write html string to the panel body. So, we can write our div’s,custom styles and any HTML content. If you remember earlier we used the items property to add items to ourviewport panel. Here in the pop-up panel we do not need to use the items property because we are not adding anycomponents. We just need to show some text so use the html property. Now, things are in place and our list isinteractive. Clicking a contact item should display the details pop up now. Lets look at the entire code,<!DOCTYPE html><html><head> <title>My first Sencha Touch application</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href="css/sencha-touch.css" rel="Stylesheet"/> <script type="text/javascript" src="js/sencha-touch-debug.js"></script> <script type="text/javascript"> Ext.setup({ tabletStartupScreen: tablet_startup.png, phoneStartupScreen: phone_startup.png, icon: images/homeblue.png, glossOnIcon: false, onReady: function(){ Ext.regModel(Contact, { fields: [firstName, lastName, contactno,address] }); var data = [
  5. 5. {firstName: Pearlie, lastName: White,contactno:011-9865460, address:365-Andrews Street, CA}, {firstName: John, lastName: Suttle,contactno:011-7658740, address:Donut Avenue, Bills Palace, Washington}, {firstName: Javier, lastName: Henderson,contactno:011-9865460, address:365-Andrews Street, CA}, //keeping the data samefor demo purpose {firstName: Young, lastName: Alverd,contactno:011-9865460, address:365-Andrews Street, CA}, {firstName: Billy, lastName: Artega,contactno:011-9865460, address:365-Andrews Street, CA}, {firstName: Dona, lastName: Bigglker,contactno:011-9865460, address:365-Andrews Street, CA}, {firstName: Alfred, lastName: Blackburn,contactno:011-9865460, address:365-Andrews Street, CA}, {firstName: Trenton, lastName: Bollinger,contactno:011-9865460, address:365-Andrews Street, CA}, {firstName: Tom, lastName: Foose, contactno:011-9865460, address:365-Andrews Street, CA} ]; var itemTemplate = new Ext.XTemplate( <tpl for=".">, {firstName} {lastName}, </tpl> ); store = new Ext.data.Store({ model: Contact,
  6. 6. data: data }); var contactList = new Ext.List({ store: store, itemTpl: itemTemplate, height:"100%" }); contactList.on("itemtap",function(dataView,index,item,e){ var first_name =dataView.store.getAt(index).data.firstName; var last_name = dataView.store.getAt(index).data.lastName; var contact = dataView.store.getAt(index).data.contactno; var address = dataView.store.getAt(index).data.address; this.overlay = new Ext.Panel({ modal:true, centered:true, floating:true, width: 250, height:250, styleHtmlContent:true, dockedItems:[{xtype:toolbar, title:first_name + " "+ last_name}], dock:top,
  7. 7. html:<div style="margin-bottom:10px;"><b>Contact:</b> + contact + "</div><div><b>Address: </b><br/>" + address + "</div>" }); this.overlay.show(pop); }); new Ext.Panel({ fullscreen:true, layout:fit, dockedItems:[{xtype:toolbar, title:Contact List}], dock:top, scroll:vertical, items:[contactList] }); } }); </script></head><body></body></html>Run the application and you will notice the changes.
  8. 8. Here is the link to the complete demo : http://jbk404.site50.net/sencha/gettingstarted/Try opening the url in your iPhone browser. If you do not have one try it out here http://www.iphonetester.com/