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

Description pop-up
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 a getAt(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/

12 thoughts on “Writing your first Sencha Touch 1 application – Part3

  1. hey, your tutorial helps a lot. However I want to send the data to another PANEL (and not in an overlay )which is embedded in a rootpanel. So basicall there is a list docked on the left and another panel docked in the bottom. i wan to populate this bottom panel with data selected in the list

    • Thanks. Here is what I feel you can do
      To get the data from the list you can try whatever I have done my post – Part3 for eg.
      var first_name = dataView.store.getAt(index).data.firstName;
      var last_name = dataView.store.getAt(index).data.lastName;

      and then to show the values in the new panel you can use normal javascript for it (this is one way and easier), end of the day Sencha is based on javascript. So try something like this,
      Let’s say inside your other panel you have some div elements (id=’displayFirstName’)

      document.getElementById(‘displayFirstName’).innerHTML = first_name;
      just assign the value of the variable (value that you got by clicking the list item)

      Hope this helps!

  2. Thanks Joseph for your promptness. I however, used the panel.update function. I was hoping if u could help me in developing a bookshelf kind of a view like the one you see in aldiko. I will send you snapshot. I want to implement it using Sencha/JQuery. Please let me know.

    http://mp4nation.net/blog/2010/06/aldiko-android-app-review/

    Please see the image on this link. I want the view of the first top shelf only.

    • You want a Bookshelf kind of a view or is it that you are trying to make something similar to Aldiko in Sencha? Also I do not have an Android phone with me, so do not know how Aldiko runs. What all features will be there in your app?

  3. As of now, I just want that view which will contain icons being place horizontally on the shelves. The user will be then be able to drag and drop a book in the cart.

    • Hi Rohit,
      I think you can get the view done by using XTemplates and List control. You can modify your List view – each row to hold let’s say 2 or three book items. The data for the book items can be stored in the Store-Model and then fetched in the List. The drag n drop functionality can also be implemented. Will be a bit complex though but it can be done with HTML5 drag n drop.

  4. Hello, in Sencha Touch 2, what should I do to use the list of items to send me to the detailed view instead of using the disclosure icon?

    I noticed that from your demo, you did that, but I want to slide into a Panel containing the details isntead of using a modal window.

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