Programmers Sample Guide: Sencha Touch 2 List example with buttons such as Add, Delete, Edit

In this example we are going to display a List of countries along with a button. In the controller we are going to capture the itemptap event and then check whether the button was clicked or the whole row was tapped so we can take the proper action. Adding custom buttons to the list such as Add, Delete, Edit etc. we can program different actions after user taps on these buttons. For back-end programing for this example please refer to the link below...
Sencha Touch 2 List examples using Java Servlet and MySQL database

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="myButton">' +
        '<input type="button" name="{code}" value="Click" ' +
        'style="padding:3px;">' +
        '</div>' +
        '<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);
     if(event.target.type == "button"){
      Ext.Msg.alert('You clicked on the Button ...', 
      'The country code selected is: ' + event.target.name);
     }
     else {
      Ext.Msg.alert('You clicked on the Row ...', 
      'The country code selected is: ' + record.get('code'));
     }
    },

});

Programmers Sample Guide

Sencha Touch 2 List example with buttons such as Add, Delete, Edit