Blog Archive

Sencha Touch 2 List itemtap example

Display a List in Sencha Touch and capture itemtap event

In this example we are going to display a List of countries with some additional information and when an user taps on an entry it will capture the itemtap event and display the country code. You can do further processing now that you have the country code available. For back-end programing for this example please refer to the link below...
Sencha Touch 2 List examples using Java Servlet and MySQL database

sencha touch list itemtap example


Source for the application HTML file - index.html

<!DOCTYPE html>
<html>
<head>
<title>Sencha Touch 2 List example - Load data from Remote
 Server</title>
<link rel="stylesheet"
 href="sencha-touch/resources/css-debug/sencha-touch.css"
 type="text/css">
<style type="text/css">
.myButton {
 margin-left: 10px;
 margin-right: 10px;
 float: left;
}

.myContent {
 margin-bottom: 5px;
}
</style>
<script type="text/javascript"
 src="sencha-touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

Source for the JavaScript file - app.js

Ext.Loader.setConfig({ 
 enabled: true 
});

Ext.application({
    
 name: 'MyApp',
 appFolder: 'app',
 
 requires: [
               'MyApp.view.MainPanel',
               ], 
               
    views : ['MainPanel'],           
    controllers: ['DataViewDemo'],
    
    launch: function() {
     console.log('Application launch');
     Ext.create('Ext.Container', {
      fullscreen: true,
      layout: 'vbox',
         items: [{
          flex: 1,
          xtype: 'mainPanel'
            }]
     });
    }
    
});

Source for Country model - Country.js

Ext.define('MyApp.model.Country', {
    extend: 'Ext.data.Model',
    config: {
     fields: [
              'code',
              'name',
              'continent',
              'region',
              'lifeExpectancy',
              'gnp'
              ]
    }
});

Source for Country store - Countries.js

Ext.define('MyApp.store.Countries', {
    extend: 'Ext.data.Store',
    
    config: {
     model: 'MyApp.model.Country',
     autoLoad: true,
     
     proxy: {
         type: 'ajax',
         url: 'CountryServlet',
         reader: {
             type: 'json',
             totalProperty: 'totalCount',
             rootProperty: 'countries',
             successProperty: 'success'
         },
   }
    }
});

Source for DataView List - MainPanel.js

Ext.define('MyApp.view.MainPanel', {
    extend: 'Ext.dataview.List',
    alias : 'widget.mainPanel',
    
    config: {
     store : 'Countries',
     
     itemTpl: '<div class="myContent">'+ 
        '<div>Country is <b>{name}</b></div>' +
        '<div>Continent: <b>{continent}</b> Region: <b>{region}</b></div>' +
        '</div>'
    
    } 
});

Source for the application controller - DataViewDemo.js

Ext.define('MyApp.controller.DataViewDemo', {
 extend : 'Ext.app.Controller',
 
 config: {
  profile: Ext.os.deviceType.toLowerCase(),
  stores : ['Countries'],
  models : ['Country'],
  refs: {
   myContainer: 'mainPanel'
  },
        control: {
   'mainPanel': {
             activate: 'onActivate',
             itemtap: 'onItemTap',
           }
        }  
  
    },
    
 onActivate: function() {
     console.log('Main container is active');
    },
   
    onItemTap: function(view, index, target, record, event) {
     console.log('Item was tapped on the Data View');
     console.log(view, index, target, record, event);
      Ext.Msg.alert('', 'The country code selected is: ' + record.get('code'));
    },
   
});