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,

Ext.regModel('Contact', {

fields: ['firstName', 'lastName', 'contactno', 'address']

});

var data = [

{firstName: 'Pearlie', lastName: 'White', contactno:'011-9865460',

address:'365-Andrews Street, CA'},

{firstName: 'John', lastName: 'Suttle', contactno:'011-7658740',

address:'Donut Avenue, Bill\'s Palace, Washington'}

]

Note the new fields contactno and address added to our model and data array. Also we have put some new

information for these fields. This is all the changes that we have to make in our data model. Next we will have to add

a event listener to our list and also make a pop-up to display the data.

Listening to Itemtap

Lets register an event listener to our list so that it can listen to item tap events. This is how it is called in mobile

devices, a click is an item tap. Luckily, Ext.List class defines the on method to register an event listener and also

defines 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 two

parameters, 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 time

there 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 is

bound to an Ext.data.Store so that as the data in the store changes the view is automatically updated to reflect the

changes

index: index of the item clicked in the list. Starts from 0

item: the data item clicked. It is an object

e: event object

So we have the skeleton in place, lets put some flesh. Inside the function we will write code to show the pop up that

will contain the details for the person. To make a pop up we will use a Ext.Panel class instance and set it to be modal

and a floating dialog. Also before doing that we need to parse the data from the item clicked upon and display inside

the 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;

});

Note, how I have extracted the firstName, lastName, contactno and address from the item clicked. I have  used the

dataView and index to do so.  From the dataView object I have accessed the store instance. Store defines

agetAt(index) method to get the data item at a particular index. And then accessed the properties by their names as

defined 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 the

Panel will be a modal dialog. Also note some other important properties, centered: sets the window to the

center,width and height are as defined. Setting styleHtmlContent to true ensures that Sencha will take care of

styling the components inside your panel by adding CSS styles automatically. Also we have docked a toolbar on top

and set its title to show the firstname and lastname. We have discussed about docked items in the earlier parts. The

important 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 our

viewport panel. Here in the pop-up panel we do not need to use the items property because we are not adding any

components. We just need to show some text so use the html property. Now, things are in place and our list is

interactive. 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 = [

{firstName: 'Pearlie', lastName: 'White',

contactno:'011-9865460', address:'365-Andrews Street, CA'},

{firstName: 'John', lastName: 'Suttle',

contactno:'011-7658740', address:'Donut Avenue, Bill\'s Palace, Washington'},

{firstName: 'Javier', lastName: 'Henderson',

contactno:'011-9865460', address:'365-Andrews Street, CA'}, //keeping the data same

for 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',

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',

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.

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/